From 3b27db428b87e502959af2b5b674e4efbd2e17da Mon Sep 17 00:00:00 2001 From: Icey Wu <66096254+IceyWu@users.noreply.github.com> Date: Sun, 29 Oct 2023 11:42:58 +0800 Subject: [PATCH] feat(components): [watermark] add font textAlign and textBaseline (#14567) --- docs/en-US/component/watermark.md | 18 ++++++++++-------- packages/components/watermark/src/useClips.ts | 14 +++++++++++--- packages/components/watermark/src/watermark.ts | 8 ++++++++ .../components/watermark/src/watermark.vue | 4 ++++ 4 files changed, 33 insertions(+), 11 deletions(-) diff --git a/docs/en-US/component/watermark.md b/docs/en-US/component/watermark.md index 932a9c91b1..a45e62dcb3 100644 --- a/docs/en-US/component/watermark.md +++ b/docs/en-US/component/watermark.md @@ -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 | diff --git a/packages/components/watermark/src/useClips.ts b/packages/components/watermark/src/useClips.ts index f671c34c4d..b305f14779 100644 --- a/packages/components/watermark/src/useClips.ts +++ b/packages/components/watermark/src/useClips.ts @@ -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( diff --git a/packages/components/watermark/src/watermark.ts b/packages/components/watermark/src/watermark.ts index da23dfd9c6..77a0ad3a4f 100644 --- a/packages/components/watermark/src/watermark.ts +++ b/packages/components/watermark/src/watermark.ts @@ -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({ diff --git a/packages/components/watermark/src/watermark.vue b/packages/components/watermark/src/watermark.vue index 9a7acfb423..e0864007cc 100644 --- a/packages/components/watermark/src/watermark.vue +++ b/packages/components/watermark/src/watermark.vue @@ -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