HarmonyOS 背景水印问题

有没有这种背景水印的demo？

HarmonyOS

FengTianYa

2024-09-30 10:54:21

浏览

回答 1

待解决

回答 1

按赞同

按时间

Heiang

可以参考如下demo实现背景水印的功能：

@Entry  
@Component  
struct Index {  
  private settings: RenderingContextSettings = new RenderingContextSettings(true)  
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)  
  build() {  
    Column(){  
      Stack({ alignContent: Alignment.Center }) {  
        Column() {  
          Text("没有数据哦").fontColor("#495057")  
          Image($r("app.media.app_icon")).width(300)  
        }  
        Canvas(this.context)  
          .width("100%")  
          .height("100%")  
          .hitTestBehavior(HitTestMode.Transparent)  
          .onReady(() => {  
            this.context.fillStyle = '#10000000'  
            this.context.font = "16vp"  
            this.context.textAlign = "center"  
            this.context.textBaseline = "middle"  
            // 在这里绘制文字水印，也可以是图片水印  
            for (let i = 0; i < this.context.width / 120; i++) {  
              this.context.translate(120, 0)  
              let j = 0  
              for (; j < this.context.height / 120; j++) {  
                this.context.rotate(-Math.PI / 180 * 30)  
                // 此处水印数据是定值，具体请替换为自己的水印  
                this.context.fillText("水印水印水印", -60, -60)  
                this.context.rotate(Math.PI / 180 * 30)  
                this.context.translate(0, 120)  
              }  
              this.context.translate(0, -120 * j)  
            }  
          })  
      }.layoutWeight(1)  
}.width('100%').height('100%').justifyContent(FlexAlign.Center)  
  }  
}