javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(components): [watermark] add font textAlign and textBaseline (#14567)

Browse Source
This commit is contained in:
Icey Wu
2023-10-29 11:42:58 +08:00
committed by GitHub
parent 2c11496a76
commit 3b27db428b
4 changed files with 33 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
docs/en-US/component/watermark.md
View File

@@ -58,17 +58,19 @@ watermark/custom
| rotate | When the watermark is drawn, the rotation Angle, unit `°` | ^[number] | -22 |
| zIndex | The z-index of the appended watermark element | ^[number] | 9 |
| image | Image source, it is recommended to export 2x or 3x image, high priority | ^[string] | - |
| content | Watermark text content | ^[string] \| ^[object]`string[]` | - |
| content | Watermark text content | ^[string]/^[object]`string[]` | - |
| font | Text style | [Font](#font) | [Font](#font) |
| gap | The spacing between watermarks | ^[object]`[number, number]` | \[100, 100\] |
| offset | The offset of the watermark from the upper left corner of the container. The default is `gap/2` | ^[object]`[number, number]` | \[gap\[0\]/2, gap\[1\]/2\] |
### Font
| Name | Description | Type | Default |
| ---------- | ----------- | ---------------------------------------------------- | --------------- |
| color | font color | ^[string] | rgba(0,0,0,.15) |
| fontSize | font size | ^[number] | 16 |
| fontWeight | font weight | ^[enum]`'normal' \| 'light' \| 'weight' \| number` | normal |
| fontFamily | font family | ^[string] | sans-serif |
| fontStyle | font style | ^[enum]`'none' \| 'normal' \| 'italic' \| 'oblique'` | normal |
| Name | Description | Type | Default |
| ------------ | ------------- | ------------------------------------------------------------------------------------ | --------------- |
| color | font color | ^[string] | rgba(0,0,0,.15) |
| fontSize | font size | ^[number] | 16 |
| fontWeight | font weight | ^[enum]`'normal' \| 'light' \| 'weight' \| number` | normal |
| fontFamily | font family | ^[string] | sans-serif |
| fontStyle | font style | ^[enum]`'none' \| 'normal' \| 'italic' \| 'oblique'` | normal |
| textAlign | text align | ^[enum]`'left' \| 'right' \| 'center'\| 'start' \| 'end' ` | center |
| textBaseline | text baseline | ^[enum]`'top' \| 'hanging' \| 'middle' \| 'alphabetic' \| 'ideographic' \| 'bottom'` | top |

14
packages/components/watermark/src/useClips.ts
View File

@@ -51,13 +51,21 @@ export default function useClips() {
ctx.drawImage(content, 0, 0, contentWidth, contentHeight)
} else {
// Text
const { color, fontSize, fontStyle, fontWeight, fontFamily } = font
const {
color,
fontSize,
fontStyle,
fontWeight,
fontFamily,
textAlign,
textBaseline,
} = font
const mergedFontSize = Number(fontSize) * ratio
ctx.font = `${fontStyle} normal ${fontWeight} ${mergedFontSize}px/${height}px ${fontFamily}`
ctx.fillStyle = color
ctx.textAlign = 'center'
ctx.textBaseline = 'top'
ctx.textAlign = textAlign
ctx.textBaseline = textBaseline
const contents = Array.isArray(content) ? content : [content]
contents?.forEach((item, index) => {
ctx.fillText(

8
packages/components/watermark/src/watermark.ts
View File

@@ -9,6 +9,14 @@ export interface WatermarkFontType {
fontWeight?: 'normal' | 'light' | 'weight' | number
fontStyle?: 'none' | 'normal' | 'italic' | 'oblique'
fontFamily?: string
textAlign?: 'start' | 'end' | 'left' | 'right' | 'center'
textBaseline?:
| 'top'
| 'hanging'
| 'middle'
| 'alphabetic'
| 'ideographic'
| 'bottom'
}
export const watermarkProps = buildProps({

4
packages/components/watermark/src/watermark.vue
View File

@@ -34,6 +34,8 @@ const fontSize = computed(() => props.font?.fontSize ?? 16)
const fontWeight = computed(() => props.font?.fontWeight ?? 'normal')
const fontStyle = computed(() => props.font?.fontStyle ?? 'normal')
const fontFamily = computed(() => props.font?.fontFamily ?? 'sans-serif')
const textAlign = computed(() => props.font?.textAlign ?? 'center')
const textBaseline = computed(() => props.font?.textBaseline ?? 'top')
const gapX = computed(() => props.gap[0])
const gapY = computed(() => props.gap[1])
@@ -163,6 +165,8 @@ const renderWatermark = () => {
fontStyle: fontStyle.value,
fontWeight: fontWeight.value,
fontFamily: fontFamily.value,
textAlign: textAlign.value,
textBaseline: textBaseline.value,
},
gapX.value,
gapY.value