canvas如何实现水印效果

canvas实现水印效果

HarmonyOS
2024-05-26 14:21:09
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
ychfang

核心代码

import { MiniWatermark } from './Page1' 
 
@Entry 
@Component 
struct Index { 
  @State message: string = 'Hello World' 
  @State show: boolean = false 
  @State watermarkColor: string = '#ff0000'; 
  @State waterTextSize: number = 14; 
  @State watermarkText: string = '这是一条水印' 
 
  build() { 
    Stack() { 
      Column() { 
        Text(this.message) 
          .fontSize(20) 
          .fontWeight(FontWeight.Bold) 
          .margin({ bottom: 10 }) 
          .textAlign(TextAlign.Center) 
          .width('100%') 
        Row() { 
          Button("颜色1") 
            .fontSize(11) 
            .onClick(() => { 
              this.watermarkColor = '#00ff00' 
            }) 
          Button("颜色2") 
            .fontSize(11) 
            .onClick(() => { 
              this.watermarkColor = '#0000ff' 
            }) 
        } 
      } 
 
      MiniWatermark({ 
        waterText: this.watermarkText, 
        waterTextSize: this.waterTextSize, 
        waterTextColor: this.watermarkColor 
      }) 
    } 
 
  } 
} 
 
import measure from '@ohos.measure'; 
 
@Component 
export struct MiniWatermark { 
  private settings: RenderingContextSettings = new RenderingContextSettings(true); 
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 
  private settings2: RenderingContextSettings = new RenderingContextSettings(true); 
  private context2: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings2); 
  @Prop @Watch('clearAndDraw') waterText: string; 
  @Prop @Watch('clearAndDraw') waterTextSize: number; 
  @Prop @Watch('clearAndDraw') waterTextColor: string; 
  @State image: string = ''; 
  @State realWidth: number = 0; 
  @State realHeight: number = 0; 
 
  aboutToAppear() { 
    this.initWH(); 
  } 
 
  clearAndDraw() { 
    this.initWH(); 
    this.drawText(); 
    this.drawWaterMark(); 
  } 
 
  private initWH() { 
    const textWidth = measure.measureText({ 
      textContent: this.waterText, 
      fontSize: `${this.waterTextSize}fp` 
    }); 
    this.realWidth = textWidth + vp2px(20); 
    const textHeight = textWidth * 0.6; 
    this.realHeight = textHeight + vp2px(20); 
  } 
 
  build() { 
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 
      Stack() { 
        Canvas(this.context2) 
          .width(this.realWidth + 'px') 
          .height(this.realHeight + 'px') 
          .backgroundColor(Color.Green) 
          .onReady(() => { 
            this.context2.rotate(30 * Math.PI / 180); 
            this.drawText(); 
          }) 
          .visibility(Visibility.Visible) 
 
        Canvas(this.context) 
          .width('100%') 
          .height('100%') 
          .backgroundColor(Color.Transparent) 
          .onReady(() => { 
            this.drawWaterMark(); 
          }) 
          .visibility(Visibility.Visible) 
      } 
      .width('100%') 
      .height('100%') 
      .hitTestBehavior(HitTestMode.Transparent) 
    }.hitTestBehavior(HitTestMode.Transparent) 
  } 
 
  private drawWaterMark() { 
    this.context.clearRect(0, 0, 6000, 6000); 
    // 绘制填充类文本 
    const img: ImageBitmap = new ImageBitmap(this.image); 
    const pattern = this.context.createPattern(img, 'repeat'); 
    if (pattern) { 
      this.context.fillStyle = pattern; 
    } 
    this.context.fillRect(0, 0, 6000, 6000); 
    this.context.restore(); 
  } 
 
  private drawText() { 
    this.context2.rotate(-30 * Math.PI / 180); 
    this.context2.clearRect(0, 0, 6000, 6000); 
    this.context2.rotate(30 * Math.PI / 180); 
    this.context2.font = `${fp2px(this.waterTextSize)}px`; 
    this.context2.fillStyle = this.waterTextColor; 
    this.context2.fillText(this.waterText, 10, 10); 
    this.context2.restore(); 
    this.image = this.context2.toDataURL(); 
  } 
 
  private drawColor() { 
    this.context2.fillStyle = this.waterTextColor; 
    this.context2.clearRect(0, 0, 6000, 6000); 
    this.context2.rotate(30 * Math.PI / 180); 
    this.context2.font = `${fp2px(this.waterTextSize)}px`; 
    this.context2.fillStyle = this.waterTextColor; 
    this.context2.fillText(this.waterText, 10, 10); 
    this.context2.restore(); 
    this.image = this.context2.toDataURL(); 
  } 
}

实现效果

分享
微博
QQ
微信
回复
2024-05-27 18:11:27
相关问题
如何使用canvas添加水印
434浏览 • 1回复 待解决
如何实现星级评分效果
59浏览 • 1回复 待解决
如何等效实现JSONObejct效果
262浏览 • 1回复 待解决
如何通过Progress实现loading效果
43浏览 • 1回复 待解决
图片模糊效果如何实现
350浏览 • 1回复 待解决
如何实现视频滤镜效果
756浏览 • 1回复 待解决
如何实现动画转场效果
393浏览 • 1回复 待解决
如何实现列表页的单选效果
1040浏览 • 0回复 待解决
如何实现组件的阴影效果
377浏览 • 1回复 待解决
如何实现类似keyframes的效果
794浏览 • 1回复 待解决
文字动画效果如何实现
802浏览 • 0回复 待解决
如何实现全局浮窗效果
688浏览 • 1回复 待解决
如何实现按钮的点击效果
25浏览 • 2回复 待解决
基于原生的水印添加能力
234浏览 • 1回复 待解决
如何实现图片的大图预览效果
530浏览 • 1回复 待解决
滑动组件如何实现单边spring的效果
534浏览 • 1回复 待解决
如何实现通用的吸顶效果
200浏览 • 1回复 待解决
List组件如何实现多列效果
747浏览 • 1回复 待解决
CustomDialog如何实现半模态详情页效果
667浏览 • 1回复 待解决
属性动画如何实现宽高动画效果
700浏览 • 1回复 待解决