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 (
- |
)
}
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 (
- setFlag(false)}
- >
+ setFlag(0)}>
Text
- setFlag(true)}>Image
- {!flag && }
- {flag && (
+ setFlag(2)}>
+ Multi-line Text
+
+ setFlag(1)}>Image
+ {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())
}