支付寶小程序 UI·頁面水印

在小程序頁面添加自定義水印。使用水印組件 <water-mark> 時(shí)，該組件需與被加上水印的模塊對(duì)應(yīng)的 <view>保持同級(jí)。

掃碼體驗(yàn)

前提條件

使用水印的前提條件如下：

• 已完成 開發(fā)者入駐 與 小程序創(chuàng)建 。
• 已下載并安裝 小程序開發(fā)者工具。

獲取模板代碼

下載 水印 Demo.zip 文件，并解壓至本地。

頁面使用

page.axml

<water-mark fillText="侵權(quán)必究" />

參數(shù)說明

示例代碼

index.axml

<canvas id="canvas" width="610" height="610" class="water-canvas"   />  

index.acss

.water-canvas {
  position: fixed;
  top:0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: transparent;
}
/* 控制button組件可以在水印上點(diǎn)擊 */
button{
  position: relative;
}

index.js

Component({
  props: {
    fillText: '侵權(quán)必究' // 水印文本，默認(rèn)值
  },
  didMount() {
    this.ctx = my.createCanvasContext('canvas');
    this.drawWater();
  },
  didUpdate() {
    this.drawWater();
  },
  methods: {
    /**
     * @name drawWater
     * @description 填充水印
     */
    drawWater() {
      const { fillText } = this.props;
      this.ctx.rotate(18 * Math.PI / 180);// 設(shè)置文字的旋轉(zhuǎn)角度，角度為30°
      // 對(duì)斜對(duì)角線以左部分進(jìn)行文字的填充
      for (let j = 1; j < 10; j++) { // 用for循環(huán)達(dá)到重復(fù)輸出文字的效果，這個(gè)for循環(huán)代表縱向循環(huán)
        this.fill(fillText, 0, 90 * j);
        for (let i = 1; i < 10; i++) { // 這個(gè)for循環(huán)代表橫向循環(huán)，
          this.fill(fillText, 130 * i, 80 * j);
        }
      }// 兩個(gè)for循環(huán)的配合，使得文字充滿斜對(duì)角線的左下部分


      // 對(duì)斜對(duì)角線以右部分進(jìn)行文字的填充邏輯同上
      for (let j = 0; j < 10; j++) {
        this.fill(fillText, 0, -80 * j);
        for (let i = 1; i < 10; i++) {
          this.fill(fillText, 130 * i, -80 * j);
        }
      }
      this.ctx.draw();
    },
    /**
     * @name fill
     * @description 繪畫水印
     */
    fill(text, x, y){
      this.ctx.beginPath();
      this.ctx.setFontSize(20);
      this.ctx.setFillStyle('rgba(169,169,169,.2)');
      this.ctx.fillText(text, x, y);
    }


  }
});

index.json

{
  "component": true
}