#鸿蒙通关秘籍#如何在页面背景中实时渲染水印效果?

HarmonyOS
1天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
SQL暗影幽魂

以下演示了如何在HarmonyOS应用中使用Canvas组件实现页面背景水印效果:

  1. 创建一个自定义WaterMarkView组件。在其中使用Canvas组件的onReady方法配置绘图属性并绘制水印:

    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);
         }
       });
    
  2. 通过overlay属性将以上绘制的水印背景作为浮层加入页面布局中,使其覆盖在页面顶部。

    @Builder
    contentView() {
      Stack() {
        Column() {
        }
        .height('100%')
        .overlay(createWaterMarkView())
      }
    }
    

通过这种方式,能够在HarmonyOS页面背景中实现实时渲染水印效果,为应用增添更多的个性化。

分享
微博
QQ
微信
回复
1天前
相关问题
canvas如何实现水印效果
897浏览 • 1回复 待解决
HarmonyOS 背景水印问题
280浏览 • 1回复 待解决