feat(watermark): 水印支持多行文字 (#2746)

close #2742
jdf2e · Dec 19, 2023 · beba5a9 · beba5a9
1 parent ed3f554
commit beba5a9
Show file tree

Hide file tree

Showing 7 changed files with 128 additions and 7 deletions.
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/watermark/index.vue b/packages/nutui-taro-demo/src/exhibition/pages/watermark/index.vue
@@ -19,6 +19,15 @@
       <img :src="src" alt="" />
       <nut-watermark :full-page="false" font-color="#fa2c19" content="nut-ui"></nut-watermark>
     </nut-cell>
+    <h2>多行水印</h2>
+    <nut-cell class="wrap wrap2">
+      <nut-watermark
+        :full-page="false"
+        :gap-y="24"
+        font-color="#fa2c19"
+        :content="['nut-ui', 'water-mark']"
+      ></nut-watermark>
+    </nut-cell>
   </Demo>
 </template>
 <script setup lang="ts">

diff --git a/src/packages/__VUE/watermark/demo.vue b/src/packages/__VUE/watermark/demo.vue
@@ -19,6 +19,15 @@
       <img :src="src" alt="" />
       <nut-watermark :full-page="false" font-color="#fa2c19" content="nut-ui"></nut-watermark>
     </nut-cell>
+    <h4>{{ translate('title3') }}</h4>
+    <nut-cell class="wrap wrap2">
+      <nut-watermark
+        :full-page="false"
+        :gap-y="24"
+        font-color="#fa2c19"
+        :content="['nut-ui', 'water-mark']"
+      ></nut-watermark>
+    </nut-cell>
   </div>
 </template>
 <script setup lang="ts">
@@ -28,12 +37,14 @@ const translate = useTranslate({
   'zh-CN': {
     basic: '基础用法',
     title2: '局部用法',
+    title3: '多行水印',
     btn1: '文字水印',
     btn2: '图片水印'
   },
   'en-US': {
     basic: 'Basic Usage',
     title2: 'Part Usage',
+    title3: 'Multiline Watermark',
     btn1: 'Text Watermark',
     btn2: 'Image Watermark'
   }

diff --git a/src/packages/__VUE/watermark/doc.en-US.md b/src/packages/__VUE/watermark/doc.en-US.md
@@ -95,6 +95,36 @@ const src = ref('//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d0497
 
 :::
 
+### Multiline Watermark
+
+The content attribute is passed into a string array, showing a multi-line watermark
+
+:::demo
+
+```vue
+<template>
+  <nut-cell class="wrap">
+    <nut-watermark
+      :full-page="false"
+      :gap-y="24"
+      font-color="#fa2c19"
+      :content="['nut-ui', 'water-mark']"
+    ></nut-watermark>
+  </nut-cell>
+</template>
+<script setup></script>
+<style>
+.wrap {
+  width: 100%;
+  height: 240px;
+  display: block;
+  background: #fff;
+}
+</style>
+```
+
+:::
+
 ## API
 
 ### Props
@@ -108,7 +138,7 @@ const src = ref('//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d0497
 | image-width | Width of image | number | `120` |
 | image-height | Height of image | number | `64` |
 | z-index | Z-index of the appended watermark element | number | `2000` |
-| content | Watermark text content | string | - |
+| content | Watermark text content | string | string[] | - |
 | font-color | Watermark text color | string | `rgba(0, 0, 0, .15)` |
 | font-size | Watermark text font size | string \| number | `16` |
 | gap-x | Horizontal spacing between watermarks | number | `24` |

diff --git a/src/packages/__VUE/watermark/doc.md b/src/packages/__VUE/watermark/doc.md
@@ -97,6 +97,36 @@ const src = ref('//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d0497
 
 :::
 
+### 多行水印
+
+content属性传入string数组，展示的则是多行水印
+
+:::demo
+
+```vue
+<template>
+  <nut-cell class="wrap">
+    <nut-watermark
+      :full-page="false"
+      :gap-y="24"
+      font-color="#fa2c19"
+      :content="['nut-ui', 'water-mark']"
+    ></nut-watermark>
+  </nut-cell>
+</template>
+<script setup></script>
+<style>
+.wrap {
+  width: 100%;
+  height: 240px;
+  display: block;
+  background: #fff;
+}
+</style>
+```
+
+:::
+
 ## API
 
 ### Props
@@ -110,7 +140,7 @@ const src = ref('//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d0497
 | image-width | 图片宽度 | number | `120` |
 | image-height | 图片高度 | number | `64` |
 | z-index | 追加的水印元素的 z-index | number | `2000` |
-| content | 水印文字内容 | string | - |
+| content | 水印文字内容 | string | string[] | - |
 | font-color | 水印文字颜色 | string | `rgba(0, 0, 0, .15)` |
 | font-size | 文字大小 | string \| number | `16` |
 | gap-x | 水印之间的水平间距 | number | `24` |

diff --git a/src/packages/__VUE/watermark/doc.taro.md b/src/packages/__VUE/watermark/doc.taro.md
@@ -97,6 +97,36 @@ const src = ref('//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d0497
 
 :::
 
+### 多行水印
+
+content属性传入string数组，展示的则是多行水印
+
+:::demo
+
+```vue
+<template>
+  <nut-cell class="wrap">
+    <nut-watermark
+      :full-page="false"
+      :gap-y="24"
+      font-color="#fa2c19"
+      :content="['nut-ui', 'water-mark']"
+    ></nut-watermark>
+  </nut-cell>
+</template>
+<script setup></script>
+<style>
+.wrap {
+  width: 100%;
+  height: 240px;
+  display: block;
+  background: #fff;
+}
+</style>
+```
+
+:::
+
 ## API
 
 ### Props

diff --git a/src/packages/__VUE/watermark/index.taro.vue b/src/packages/__VUE/watermark/index.taro.vue
@@ -58,7 +58,7 @@ export default create({
       default: 64
     },
     content: {
-      type: String,
+      type: [String, Array<string>],
       default: ''
     },
     fontColor: {
@@ -202,7 +202,13 @@ export default create({
       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.map((item, index) => {
+          ctx.fillText(item, 0, (index - 1) * markSize);
+        });
+      } else {
+        ctx.fillText(content, 0, 0);
+      }
       ctx.restore();
       state.base64Url = canvas.toDataURL();
     };

diff --git a/src/packages/__VUE/watermark/index.vue b/src/packages/__VUE/watermark/index.vue
@@ -56,7 +56,7 @@ export default create({
       default: 64
     },
     content: {
-      type: String,
+      type: [String, Array<string>],
       default: ''
     },
     fontColor: {
@@ -148,8 +148,13 @@ export default create({
           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.map((item, index) => {
+              ctx.fillText(item, 0, (index - 1) * markSize);
+            });
+          } else {
+            ctx.fillText(content, 0, 0);
+          }
           ctx.restore();
           state.base64Url = canvas.toDataURL();
         }