Repository: ant-design/ant-design-mobile
Pull request #5800 (2022-11-09 02:45:28)

feat(WaterMark): add more rows content watermark and test
支持多行文字水印

github-actions[bot]: PR preview has been successfully built and deployed to https://antd-mobile-preview-pr-5800.surge.sh
codecov[bot]: # [Codecov](https://codecov.io/gh/ant-design/ant-design-mobile/pull/5800?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) Report
Base: **89.59**% // Head: **90.11**% // Increases project coverage by **`+0.51%`** :tada:
> Coverage data is based on head [(`78ac2c8`)](https://codecov.io/gh/ant-design/ant-design-mobile/pull/5800?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) compared to base [(`744bb4a`)](https://codecov.io/gh/ant-design/ant-design-mobile/commit/744bb4a9792b6c0cf6ef00129f20d0692d65cf2d?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design).
> Patch coverage: 100.00% of modified lines in pull request are covered.

<details><summary>Additional details and impacted files</summary>


```diff
@@            Coverage Diff             @@
##           master    #5800      +/-   ##
==========================================
+ Coverage   89.59%   90.11%   +0.51%     
==========================================
  Files         297      297              
  Lines        6372     6391      +19     
  Branches     1564     1578      +14     
==========================================
+ Hits         5709     5759      +50     
+ Misses        610      580      -30     
+ Partials       53       52       -1     
```


| [Impacted Files](https://codecov.io/gh/ant-design/ant-design-mobile/pull/5800?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) | Coverage Δ | |
|---|---|---|
| [src/components/water-mark/water-mark.tsx](https://codecov.io/gh/ant-design/ant-design-mobile/pull/5800/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design#diff-c3JjL2NvbXBvbmVudHMvd2F0ZXItbWFyay93YXRlci1tYXJrLnRzeA==) | `100.00% <100.00%> (ø)` | |
| [src/components/image-uploader/image-uploader.tsx](https://codecov.io/gh/ant-design/ant-design-mobile/pull/5800/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design#diff-c3JjL2NvbXBvbmVudHMvaW1hZ2UtdXBsb2FkZXIvaW1hZ2UtdXBsb2FkZXIudHN4) | `88.49% <0.00%> (-4.24%)` | :arrow_down: |
| [src/components/cascader-view/cascader-view.tsx](https://codecov.io/gh/ant-design/ant-design-mobile/pull/5800/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design#diff-c3JjL2NvbXBvbmVudHMvY2FzY2FkZXItdmlldy9jYXNjYWRlci12aWV3LnRzeA==) | `91.30% <0.00%> (+0.67%)` | :arrow_up: |
| [src/utils/matrix.ts](https://codecov.io/gh/ant-design/ant-design-mobile/pull/5800/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design#diff-c3JjL3V0aWxzL21hdHJpeC50cw==) | `94.73% <0.00%> (+26.31%)` | :arrow_up: |
| [src/components/image-viewer/slide.tsx](https://codecov.io/gh/ant-design/ant-design-mobile/pull/5800/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design#diff-c3JjL2NvbXBvbmVudHMvaW1hZ2Utdmlld2VyL3NsaWRlLnRzeA==) | `58.40% <0.00%> (+31.99%)` | :arrow_up: |

Help us with your feedback. Take ten seconds to tell us [how you rate us](https://about.codecov.io/nps?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design). Have a feature suggestion? [Share it here.](https://app.codecov.io/gh/feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design)

</details>

[:umbrella: View full report at Codecov](https://codecov.io/gh/ant-design/ant-design-mobile/pull/5800?src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design).   
:loudspeaker: Do you have feedback about the report comment? [Let us know in this issue](https://about.codecov.io/codecov-pr-comment-feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design).


Patch:
diff --git a/src/components/water-mark/demos/demo1.tsx b/src/components/water-mark/demos/demo1.tsx
index a461c32b3..d98004d43 100644
--- a/src/components/water-mark/demos/demo1.tsx
+++ b/src/components/water-mark/demos/demo1.tsx
@@ -7,6 +7,10 @@ const textProps = {
   content: 'Ant Design Mobile',
 }
 
+const rowsTextProps = {
+  content: ['Ant Design Mobile', 'Ant Design Mobile Pro'],
+}
+
 const imageProps = {
   image:
     'https://gw.alipayobjects.com/zos/bmw-prod/59a18171-ae17-4fc5-93a0-2645f64a3aca.svg',
@@ -23,6 +27,8 @@ export default () => {
     <div className='water-mark-overlay'>
       <Button onClick={() => setProps(textProps)}>普通水印</Button>
       <br />
+      <Button onClick={() => setProps(rowsTextProps)}>多行文字水印</Button>
+      <br />
       <Button onClick={() => setProps(imageProps)}>图片水印</Button>
       <WaterMark {...props} />
     </div>
diff --git a/src/components/water-mark/index.en.md b/src/components/water-mark/index.en.md
index 06007f2e3..ee6175b43 100644
--- a/src/components/water-mark/index.en.md
+++ b/src/components/water-mark/index.en.md
@@ -16,21 +16,21 @@ Suitable for preventing information theft.
 
 ### Props
 
-| Name        | Description                                                                                          | Type               | Default              |
-| ----------- | ---------------------------------------------------------------------------------------------------- | ------------------ | -------------------- |
-| content     | WaterMark text content                                                                               | `string`           | -                    |
-| fontColor   | WaterMark text color                                                                                 | `string`           | `rgba(0, 0, 0, .15)` |
-| fontSize    | WaterMark text font size                                                                             | `string \| number` | `16`                 |
-| fullPage    | Whether to cover the whole page                                                                      | `boolean`          | `true`               |
-| gapX        | Horizontal spacing between watermarks                                                                | `number`           | `24`                 |
-| gapY        | Vertical spacing between watermarks                                                                  | `number`           | `48`                 |
-| height      | The height of the WaterMark                                                                          | `number`           | `64`                 |
-| image       | Image source, it is recommended to export 2x or 3x image, give priority to image rendering watermark | `string`           | -                    |
-| imageHeight | Image height                                                                                         | `number`           | `64`                 |
-| imageWidth  | Image width                                                                                          | `number`           | `120`                |
-| rotate      | When the watermark is drawn, the angle of rotation, in °                                             | `number`           | `-22`                |
-| width       | The width of the WaterMark                                                                           | `number`           | `120`                |
-| zIndex      | Z-index of the added watermark element                                                               | `number`           | `2000`               |
+| Name        | Description                                                                                          | Type                 | Default              |
+| ----------- | ---------------------------------------------------------------------------------------------------- | -------------------- | -------------------- |
+| content     | WaterMark text content                                                                               | `string \| string[]` | -                    |
+| fontColor   | WaterMark text color                                                                                 | `string`             | `rgba(0, 0, 0, .15)` |
+| fontSize    | WaterMark text font size                                                                             | `string \| number`   | `16`                 |
+| fullPage    | Whether to cover the whole page                                                                      | `boolean`            | `true`               |
+| gapX        | Horizontal spacing between watermarks                                                                | `number`             | `24`                 |
+| gapY        | Vertical spacing between watermarks                                                                  | `number`             | `48`                 |
+| height      | The height of the WaterMark                                                                          | `number`             | `64`                 |
+| image       | Image source, it is recommended to export 2x or 3x image, give priority to image rendering watermark | `string`             | -                    |
+| imageHeight | Image height                                                                                         | `number`             | `64`                 |
+| imageWidth  | Image width                                                                                          | `number`             | `120`                |
+| rotate      | When the watermark is drawn, the angle of rotation, in °                                             | `number`             | `-22`                |
+| width       | The width of the WaterMark                                                                           | `number`             | `120`                |
+| zIndex      | Z-index of the added watermark element                                                               | `number`             | `2000`               |
 
 ### CSS Variables
 
diff --git a/src/components/water-mark/index.zh.md b/src/components/water-mark/index.zh.md
index a0ae03dc0..5e8aeacb5 100644
--- a/src/components/water-mark/index.zh.md
+++ b/src/components/water-mark/index.zh.md
@@ -16,21 +16,21 @@
 
 ### 属性
 
-| 参数        | 说明                                                 | 类型               | 默认值               |
-| ----------- | ---------------------------------------------------- | ------------------ | -------------------- |
-| content     | 水印文字内容                                         | `string`           | -                    |
-| fontColor   | 水印文字颜色                                         | `string`           | `rgba(0, 0, 0, .15)` |
-| fontSize    | 文字大小                                             | `string \| number` | `16`                 |
-| fullPage    | 是否覆盖整个页面                                     | `boolean`          | `true`               |
-| gapX        | 水印之间的水平间距                                   | `number`           | `24`                 |
-| gapY        | 水印之间的垂直间距                                   | `number`           | `48`                 |
-| height      | 水印的高度                                           | `number`           | `64`                 |
-| image       | 图片源，建议导出 2 倍或 3 倍图，优先使用图片渲染水印 | `string`           | -                    |
-| imageHeight | 图片高度                                             | `number`           | `64`                 |
-| imageWidth  | 图片宽度                                             | `number`           | `120`                |
-| rotate      | 水印绘制时，旋转的角度，单位 °                       | `number`           | `-22`                |
-| width       | 水印的宽度                                           | `number`           | `120`                |
-| zIndex      | 追加的水印元素的 z-index                             | `number`           | `2000`               |
+| 参数        | 说明                                                 | 类型                 | 默认值               |
+| ----------- | ---------------------------------------------------- | -------------------- | -------------------- |
+| content     | 水印文字内容                                         | `string \| string[]` | -                    |
+| fontColor   | 水印文字颜色                                         | `string`             | `rgba(0, 0, 0, .15)` |
+| fontSize    | 文字大小                                             | `string \| number`   | `16`                 |
+| fullPage    | 是否覆盖整个页面                                     | `boolean`            | `true`               |
+| gapX        | 水印之间的水平间距                                   | `number`             | `24`                 |
+| gapY        | 水印之间的垂直间距                                   | `number`             | `48`                 |
+| height      | 水印的高度                                           | `number`             | `64`                 |
+| image       | 图片源，建议导出 2 倍或 3 倍图，优先使用图片渲染水印 | `string`             | -                    |
+| imageHeight | 图片高度                                             | `number`             | `64`                 |
+| imageWidth  | 图片宽度                                             | `number`             | `120`                |
+| rotate      | 水印绘制时，旋转的角度，单位 °                       | `number`             | `-22`                |
+| width       | 水印的宽度                                           | `number`             | `120`                |
+| zIndex      | 追加的水印元素的 z-index                             | `number`             | `2000`               |
 
 ### CSS 变量
 
diff --git a/src/components/water-mark/water-mark.tsx b/src/components/water-mark/water-mark.tsx
index 411d41d1a..2733e8804 100644
--- a/src/components/water-mark/water-mark.tsx
+++ b/src/components/water-mark/water-mark.tsx
@@ -15,7 +15,7 @@ export type WaterMarkProps = {
   image?: string
   imageWidth?: number
   imageHeight?: number
-  content?: string
+  content?: string | string[]
   fontColor?: string
   fontStyle?: 'none' | 'normal' | 'italic' | 'oblique'
   fontFamily?: string
@@ -53,7 +53,6 @@ export const WaterMark: FC<WaterMarkProps> = p => {
   useEffect(() => {
     const canvas = document.createElement('canvas')
     const ratio = window.devicePixelRatio
-
     const ctx = canvas.getContext('2d')
 
     const canvasWidth = `${(gapX + width) * ratio}px`
@@ -95,8 +94,13 @@ export const WaterMark: FC<WaterMarkProps> = p => {
         const markSize = Number(fontSize) * ratio
         ctx.font = `${fontStyle} normal ${fontWeight} ${markSize}px/${markHeight}px ${fontFamily}`
         ctx.fillStyle = fontColor
-
-        ctx.fillText(content, 0, 0)
+        if (Array.isArray(content)) {
+          content.forEach((item: string, index: number) =>
+            ctx.fillText(item, 0, index * markSize)
+          )
+        } else {
+          ctx.fillText(content, 0, 0)
+        }
         ctx.restore()
         setBase64Url(canvas.toDataURL())
       }


Test patch:
diff --git a/src/components/water-mark/tests/__snapshots__/water-mark.test.tsx.snap b/src/components/water-mark/tests/__snapshots__/water-mark.test.tsx.snap
index 468aa90e6..cd70dd038 100644
--- a/src/components/water-mark/tests/__snapshots__/water-mark.test.tsx.snap
+++ b/src/components/water-mark/tests/__snapshots__/water-mark.test.tsx.snap
@@ -17,3 +17,12 @@ exports[`WaterMark image watermark 1`] = `
   />
 </div>
 `;
+
+exports[`WaterMark more rows content watermark 1`] = `
+<div>
+  <div
+    class="adm-water-mark adm-water-mark-full-page"
+    style="z-index: 2000; background-size: 144px; background-image: url(data:image/png;base64,00);"
+  />
+</div>
+`;
diff --git a/src/components/water-mark/tests/water-mark.test.tsx b/src/components/water-mark/tests/water-mark.test.tsx
index a4927d866..5c3ffde47 100644
--- a/src/components/water-mark/tests/water-mark.test.tsx
+++ b/src/components/water-mark/tests/water-mark.test.tsx
@@ -24,6 +24,13 @@ describe('WaterMark', () => {
     expect(container).toMatchSnapshot()
   })
 
+  test('more rows content watermark', () => {
+    const { container } = render(
+      <WaterMark content={['Ant Design Mobile', 'Ant Design']} />
+    )
+    expect(container).toMatchSnapshot()
+  })
+
   test('image watermark', () => {
     const image =
       'https://gw.alipayobjects.com/zos/bmw-prod/59a18171-ae17-4fc5-93a0-2645f64a3aca.svg'