feat(watermark): support multi-line text (#2477)

jdf2e · Jul 23, 2024 · 472fe69 · 472fe69
1 parent c9f8356
commit 472fe69
Show file tree

Hide file tree

Showing 8 changed files with 108 additions and 42 deletions.
diff --git 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 (
     <Cell>
-      <Button
-        style={{ marginInlineEnd: '10px' }}
-        onClick={() => setFlag(false)}
-      >
+      <Button style={{ marginInlineEnd: '10px' }} onClick={() => setFlag(0)}>
         Text
       </Button>
-      <Button onClick={() => setFlag(true)}>Image</Button>
-      {!flag && <WaterMark zIndex={200} content="NutUI-WaterMark" />}
-      {flag && (
+      <Button style={{ marginInlineEnd: '10px' }} onClick={() => setFlag(2)}>
+        Multi-line Text
+      </Button>
+      <Button onClick={() => setFlag(1)}>Image</Button>
+      {flag === 0 && <WaterMark zIndex={200} content="NutUI-WaterMark" />}
+      {flag === 1 && (
         <WaterMark
           zIndex={200}
           content="NutUI-WaterMark"
@@ -26,6 +26,27 @@ const Demo1 = () => {
           image={imgSrc.current}
         />
       )}
+      {flag === 2 && (
+        <>
+          <WaterMark
+            zIndex={200}
+            content="WaterMark"
+            rotate={22}
+            height={48}
+            gapY={70}
+            width={180}
+          />
+          <WaterMark
+            zIndex={200}
+            content="NutUI"
+            rotate={22}
+            height={48}
+            gapY={70}
+            startY={48}
+            width={180}
+          />
+        </>
+      )}
     </Cell>
   )
 }

diff --git 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 (
     <Cell>
-      <Button
-        style={{ marginInlineEnd: '10px' }}
-        onClick={() => setFlag(false)}
-      >
+      <Button style={{ marginInlineEnd: '10px' }} onClick={() => setFlag(0)}>
         Text
       </Button>
-      <Button onClick={() => setFlag(true)}>Image</Button>
-      {!flag && <WaterMark zIndex={200} content="NutUI-WaterMark" />}
-      {flag && (
+      <Button style={{ marginInlineEnd: '10px' }} onClick={() => setFlag(2)}>
+        Multi-line Text
+      </Button>
+      <Button onClick={() => setFlag(1)}>Image</Button>
+      {flag === 0 && <WaterMark zIndex={200} content="NutUI-WaterMark" />}
+      {flag === 1 && (
         <WaterMark
           zIndex={200}
           content="NutUI-WaterMark"
@@ -26,6 +26,27 @@ const Demo1 = () => {
           image={imgSrc.current}
         />
       )}
+      {flag === 2 && (
+        <>
+          <WaterMark
+            zIndex={200}
+            content="WaterMark"
+            rotate={22}
+            height={48}
+            gapY={70}
+            width={180}
+          />
+          <WaterMark
+            zIndex={200}
+            content="NutUI"
+            rotate={22}
+            height={48}
+            gapY={70}
+            startY={48}
+            width={180}
+          />
+        </>
+      )}
     </Cell>
   )
 }

diff --git 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
+
+<CodeBlock src='h5/demo1.tsx'></CodeBlock>
 
-:::demo
-
-<CodeBlock src='h5/demo1.tsx'></CodeBlock>
-
 :::
 
 ### Part Usage
 
-:::demo
-
-<CodeBlock src='h5/demo2.tsx'></CodeBlock>
-
+:::demo
+
+<CodeBlock src='h5/demo2.tsx'></CodeBlock>
+
 :::
 
 ## 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
@@ -12,19 +12,20 @@ import { WaterMark } from '@nutui/nutui-react';
 ## 示例代码
 
 ### 基础用法
+包含单行文本、多行文本、支持图片。
+
+:::demo
+
+<CodeBlock src='h5/demo1.tsx'></CodeBlock>
 
-:::demo
-
-<CodeBlock src='h5/demo1.tsx'></CodeBlock>
-
 :::
 
 ### 局部用法
 
-:::demo
-
-<CodeBlock src='h5/demo2.tsx'></CodeBlock>
-
+:::demo
+
+<CodeBlock src='h5/demo2.tsx'></CodeBlock>
+
 :::
 
 ## 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
@@ -12,19 +12,20 @@ import { Watermark } from '@nutui/nutui-react-taro';
 ## 示例代码
 
 ### 基础用法
+包含单行文本、多行文本、支持图片。
+
+:::demo
+
+<CodeBlock src='taro/demo1.tsx'></CodeBlock>
 
-:::demo
-
-<CodeBlock src='taro/demo1.tsx'></CodeBlock>
-
 :::
 
 ### 局部用法
 
-:::demo
-
-<CodeBlock src='taro/demo2.tsx'></CodeBlock>
-
+:::demo
+
+<CodeBlock src='taro/demo2.tsx'></CodeBlock>
+
 :::
 
 ## 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
@@ -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
@@ -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
@@ -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())
       }