feat(watermark): add watermark (#3799)

* feat: docs

* feat: watermark component

* chore: demo & pixelRatio

* chore: rename

* chore: optimize

* chore: css

* chore: fix obs

* chore: dark color

* chore: demo

* chore:watermark.ts

Co-authored-by: Copilot <[email protected]>

* chore: update demo

* feat(Watermark): support style and customStyle props

* chore: remove wx.onThemeChange

---------

Co-authored-by: Copilot <[email protected]>
Co-authored-by: anlyyao <[email protected]>

Author: 3 people

example/app.json

@@ -90,7 +90,8 @@
     "pages/col/col",
     "pages/col/skyline/col",
     "pages/color-picker/color-picker",
-    "pages/guide/guide"
+    "pages/guide/guide",
+    "pages/watermark/watermark"
   ],
   "subpackages": [
     {

example/pages/home/data/display.ts

@@ -79,6 +79,10 @@ const display = {
       name: 'Tag',
       label: '标签',
     },
+    {
+      name: 'Watermark',
+      label: '水印',
+    },
   ],
 };
 

example/project.config.json

@@ -406,6 +406,12 @@
           "query": "",
           "scene": null
         },
+        {
+          "name": "watermark",
+          "pathName": "pages/watermark/watermark",
+          "query": "",
+          "scene": null
+        },
         {
           "id": -1,
           "name": "search",

packages/components/watermark/README.en-US.md

@@ -0,0 +1,42 @@
+:: BASE_DOC ::
+
+## API
+
+### Watermark Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+style | Object | - | CSS(Cascading Style Sheets) | N
+custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
+alpha | Number | 1 | \- | N
+content | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
+height | Number | - | \- | N
+is-repeat | Boolean | true | \- | N
+line-space | Number | 16 | \- | N
+movable | Boolean | false | \- | N
+move-interval | Number | 3000 | \- | N
+offset | Array | - | Typescript：`Array<number>` | N
+removable | Boolean | true | \- | N
+rotate | Number | -22 | \- | N
+watermark-content | Object / Array | - | Typescript：`WatermarkText\|WatermarkImage\|Array<WatermarkText\|WatermarkImage>` | N
+width | Number | - | \- | N
+x | Number | - | \- | N
+y | Number | - | \- | N
+z-index | Number | - | \- | N
+
+### WatermarkText
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+font-color | String | rgba(0,0,0,0.1) | \- | N
+font-family | String | - | font-family configuration for watermark text | N
+font-size | Number | 16 | \- | N
+font-weight | String | normal | options: normal/lighter/bold/bolder | N
+text | String | - | \- | N
+
+### WatermarkImage
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+is-grayscale | Boolean | false | \- | N
+url | String | - | \- | N

packages/components/watermark/README.md

@@ -0,0 +1,42 @@
+:: BASE_DOC ::
+
+## API
+
+### Watermark Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+style | Object | - | 样式 | N
+custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
+alpha | Number | 1 | 水印整体透明度，取值范围 [0-1] | N
+content | String / Slot | - | 水印所覆盖的内容节点。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
+height | Number | - | 水印高度 | N
+is-repeat | Boolean | true | 水印是否重复出现 | N
+line-space | Number | 16 | 行间距，只作用在多行（`content` 配置为数组）情况下 | N
+movable | Boolean | false | 水印是否可移动 | N
+move-interval | Number | 3000 | 水印发生运动位移的间隙，单位：毫秒 | N
+offset | Array | - | 水印在画布上绘制的水平和垂直偏移量，正常情况下水印绘制在中间位置，即 `offset = [gapX / 2, gapY / 2]`。TS 类型：`Array<number>` | N
+removable | Boolean | true | 水印是否可被删除 | N
+rotate | Number | -22 | 水印旋转的角度，单位 ° | N
+watermark-content | Object / Array | - | 水印内容，需要显示多行情况下可配置为数组。TS 类型：`WatermarkText\|WatermarkImage\|Array<WatermarkText\|WatermarkImage>` | N
+width | Number | - | 水印宽度 | N
+x | Number | - | 水印之间的水平间距 | N
+y | Number | - | 水印之间的垂直间距 | N
+z-index | Number | - | 水印元素的 `z-index`，默认值写在 CSS 中 | N
+
+### WatermarkText
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+font-color | String | rgba(0,0,0,0.1) | 水印文本文字颜色 | N
+font-family | String | - | 水印文本文字字体 | N
+font-size | Number | 16 | 水印文本文字大小 | N
+font-weight | String | normal | 水印文本文字粗细。可选项：normal/lighter/bold/bolder | N
+text | String | - | 水印文本内容 | N
+
+### WatermarkImage
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+is-grayscale | Boolean | false | 水印图片是否需要灰阶显示 | N
+url | String | - | 水印图片源地址，为了显示清楚，建议导出 2 倍或 3 倍图 | N

packages/components/watermark/_example/base/index.js

@@ -0,0 +1,5 @@
+Component({
+  data: {
+    watermark: { text: '文字水印' },
+  },
+});

packages/components/watermark/_example/base/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-watermark": "tdesign-miniprogram/watermark/watermark"
+  }
+}

packages/components/watermark/_example/base/index.wxml

@@ -0,0 +1,3 @@
+<t-watermark watermark-content="{{watermark}}" y="{{56}}" x="{{56}}" width="{{68}}" height="{{52}}">
+  <view style="width: 100%; height: 340px" />
+</t-watermark>

packages/components/watermark/_example/base/index.wxss

@@ -0,0 +1,8 @@
+Component({
+  data: {
+    watermark: {
+      url: 'https://tdesign.gtimg.com/starter/brand-logo-light.png',
+      isGrayscale: true,
+    },
+  },
+});