From 472fe690a4247eacf81ad7191dacc434b2b05127 Mon Sep 17 00:00:00 2001 From: xiaoyatong <84436086+xiaoyatong@users.noreply.github.com> Date: Tue, 23 Jul 2024 17:17:48 +0800 Subject: [PATCH] feat(watermark): support multi-line text (#2477) --- src/packages/watermark/demos/h5/demo1.tsx | 37 ++++++++++++++++----- src/packages/watermark/demos/taro/demo1.tsx | 37 ++++++++++++++++----- src/packages/watermark/doc.en-US.md | 19 ++++++----- src/packages/watermark/doc.md | 19 ++++++----- src/packages/watermark/doc.taro.md | 19 ++++++----- src/packages/watermark/doc.zh-TW.md | 3 ++ src/packages/watermark/watermark.taro.tsx | 8 ++++- src/packages/watermark/watermark.tsx | 8 ++++- 8 files changed, 108 insertions(+), 42 deletions(-) diff --git a/src/packages/watermark/demos/h5/demo1.tsx b/src/packages/watermark/demos/h5/demo1.tsx index d57a4d3e90..a35cc6d117 100644 --- a/src/packages/watermark/demos/h5/demo1.tsx +++ b/src/packages/watermark/demos/h5/demo1.tsx @@ -2,21 +2,21 @@ import React, { useState, useRef } from 'react' import { WaterMark, Cell, Button } from '@nutui/nutui-react' const Demo1 = () => { - const [flag, setFlag] = useState(false) + const [flag, setFlag] = useState(0) const imgSrc = useRef( '//m.360buyimg.com/imagetools/jfs/t1/57345/6/20069/8019/62b995cdEd96fef03/51d3302dfeccd1d2.png' ) return ( - - - {!flag && } - {flag && ( + + + {flag === 0 && } + {flag === 1 && ( { image={imgSrc.current} /> )} + {flag === 2 && ( + <> + + + + )} ) } diff --git a/src/packages/watermark/demos/taro/demo1.tsx b/src/packages/watermark/demos/taro/demo1.tsx index 0280aa7030..55a6cc47d9 100644 --- a/src/packages/watermark/demos/taro/demo1.tsx +++ b/src/packages/watermark/demos/taro/demo1.tsx @@ -2,21 +2,21 @@ import React, { useState, useRef } from 'react' import { WaterMark, Cell, Button } from '@nutui/nutui-react-taro' const Demo1 = () => { - const [flag, setFlag] = useState(false) + const [flag, setFlag] = useState(0) const imgSrc = useRef( '//m.360buyimg.com/imagetools/jfs/t1/57345/6/20069/8019/62b995cdEd96fef03/51d3302dfeccd1d2.png' ) return ( - - - {!flag && } - {flag && ( + + + {flag === 0 && } + {flag === 1 && ( { image={imgSrc.current} /> )} + {flag === 2 && ( + <> + + + + )} ) } diff --git a/src/packages/watermark/doc.en-US.md b/src/packages/watermark/doc.en-US.md index 7d0c5e6ded..0d78412c5c 100644 --- a/src/packages/watermark/doc.en-US.md +++ b/src/packages/watermark/doc.en-US.md @@ -13,19 +13,20 @@ import { WaterMark } from '@nutui/nutui-react'; ## Demo ### Basic Usage +Support Text, multi-line text, and image. + +:::demo + + -:::demo - - - ::: ### Part Usage -:::demo - - - +:::demo + + + ::: ## WaterMark @@ -46,6 +47,8 @@ import { WaterMark } from '@nutui/nutui-react'; | fontSize | Watermark text font size | `string` \| `number` | `16` | | gapX | Horizontal spacing between watermarks | `number` | `24` | | gapY | Vertical spacing between watermarks | `number` | `48` | +| startX | Horizontal start | `number` | `0` | +| startY | Vertical start | `number` | `0` | | fullPage | Overwrite entire page | `boolean` | `true` | | fontFamily | Watermark text font family | `string` | `-` | diff --git a/src/packages/watermark/doc.md b/src/packages/watermark/doc.md index 1a437e68d6..3e8fcbf861 100644 --- a/src/packages/watermark/doc.md +++ b/src/packages/watermark/doc.md @@ -12,19 +12,20 @@ import { WaterMark } from '@nutui/nutui-react'; ## 示例代码 ### 基础用法 +包含单行文本、多行文本、支持图片。 + +:::demo + + -:::demo - - - ::: ### 局部用法 -:::demo - - - +:::demo + + + ::: ## WaterMark @@ -45,6 +46,8 @@ import { WaterMark } from '@nutui/nutui-react'; | fontSize | 文字大小 | `string` \| `number` | `16` | | gapX | 水印之间的水平间距 | `number` | `24` | | gapY | 水印之间的垂直间距 | `number` | `48` | +| startX | 水印之间的水平起点 | `number` | `0` | +| startY | 水印之间的垂直起点 | `number` | `0` | | fullPage | 是否覆盖整个页面 | `boolean` | `true` | | fontFamily | 水印文字字体 | `string` | `-` | diff --git a/src/packages/watermark/doc.taro.md b/src/packages/watermark/doc.taro.md index e934da287c..6291e683df 100644 --- a/src/packages/watermark/doc.taro.md +++ b/src/packages/watermark/doc.taro.md @@ -12,19 +12,20 @@ import { Watermark } from '@nutui/nutui-react-taro'; ## 示例代码 ### 基础用法 +包含单行文本、多行文本、支持图片。 + +:::demo + + -:::demo - - - ::: ### 局部用法 -:::demo - - - +:::demo + + + ::: ## WaterMark @@ -45,6 +46,8 @@ import { Watermark } from '@nutui/nutui-react-taro'; | fontSize | 文字大小 | `string` \| `number` | `16` | | gapX | 水印之间的水平间距 | `number` | `24` | | gapY | 水印之间的垂直间距 | `number` | `48` | +| startX | 水印之间的水平起点 | `number` | `0` | +| startY | 水印之间的垂直起点 | `number` | `0` | | fullPage | 是否覆盖整个页面 | `boolean` | `true` | | fontFamily | 水印文字字体 | `string` | `-` | diff --git a/src/packages/watermark/doc.zh-TW.md b/src/packages/watermark/doc.zh-TW.md index be6c3ebbbf..8a2b0a0f05 100644 --- a/src/packages/watermark/doc.zh-TW.md +++ b/src/packages/watermark/doc.zh-TW.md @@ -11,6 +11,7 @@ import { WaterMark } from '@nutui/nutui-react'; ## 示例代碼 ### 基礎用法 +包含單行文字、多行文字、支援圖片。 :::demo @@ -44,6 +45,8 @@ import { WaterMark } from '@nutui/nutui-react'; | fontSize | 文字大小 | `string` \| `number` | `16` | | gapX | 水印之間的水平間距 | `number` | `24` | | gapY | 水印之間的垂直間距 | `number` | `48` | +| startX | 水印之間的水平起點 | `number` | `0` | +| startY | 水印之間的垂直起點 | `number` | `0` | | fullPage | 是否覆蓋整個頁面 | `boolean` | `true` | | fontFamily | 水印文字字體 | `string` | `-` | diff --git a/src/packages/watermark/watermark.taro.tsx b/src/packages/watermark/watermark.taro.tsx index c99394c208..aec40919ed 100644 --- a/src/packages/watermark/watermark.taro.tsx +++ b/src/packages/watermark/watermark.taro.tsx @@ -10,6 +10,8 @@ export interface WaterMarkProps extends BasicComponent { zIndex: number gapX: number gapY: number + startX: number + startY: number width: number height: number image: string @@ -31,6 +33,8 @@ const defaultProps = { gapY: 48, width: 120, height: 64, + startX: 0, + startY: 0, image: '', imageWidth: 120, imageHeight: 64, @@ -51,6 +55,8 @@ export const WaterMark: FunctionComponent< className, gapX, gapY, + startX, + startY, width, height, image, @@ -137,7 +143,7 @@ export const WaterMark: FunctionComponent< const markSize = Number(fontSize) * ratio ctx.font = `${fontStyle} normal ${fontWeight} ${markSize}px/${markHeight}px ${fontFamily}` ctx.fillStyle = color - ctx.fillText(content, 0, 0) // 在画布上绘制"被填充的"文本。 + ctx.fillText(content, startX, startY) // 在画布上绘制"被填充的"文本。 ctx.restore() // 返回之前保存过的路径状态和属性。 setBase64Url(canvas.toDataURL()) } diff --git a/src/packages/watermark/watermark.tsx b/src/packages/watermark/watermark.tsx index b94a64a79f..beab5fb005 100644 --- a/src/packages/watermark/watermark.tsx +++ b/src/packages/watermark/watermark.tsx @@ -9,6 +9,8 @@ export interface WaterMarkProps extends BasicComponent { zIndex: number gapX: number gapY: number + startX: number + startY: number width: number height: number image: string @@ -30,6 +32,8 @@ const defaultProps = { gapY: 48, width: 120, height: 64, + startX: 0, + startY: 0, image: '', imageWidth: 120, imageHeight: 64, @@ -50,6 +54,8 @@ export const WaterMark: FunctionComponent< className, gapX, gapY, + startX, + startY, width, height, image, @@ -118,7 +124,7 @@ export const WaterMark: FunctionComponent< const markSize = Number(fontSize) * ratio ctx.font = `${fontStyle} normal ${fontWeight} ${markSize}px/${markHeight}px ${fontFamily}` ctx.fillStyle = color - ctx.fillText(content, 0, 0) // 在画布上绘制"被填充的"文本。 + ctx.fillText(content, startX, startY) // 在画布上绘制"被填充的"文本。 ctx.restore() // 返回之前保存过的路径状态和属性。 setBase64Url(canvas.toDataURL()) }