HarmonyOS Cavans没有找到类似画笔清除模式

HarmonyOS Canvas有没有像给画笔设置清除模式的api,用于清除已绘制的路径

其他系统代码:

mPaint.setColor(Color.TRANSPARENT);
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
  • 1.
  • 2.
HarmonyOS
2025-01-09 15:27:35
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
aquaa

示例参考如下:

@Entry
@Component
export struct CanvasDemo {
  @State paintSize: number = 5 // 当前画笔大小
  @State paintColor: Color = Color.Black // 当前画笔颜色
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  canvasContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  //签字区域
  guessContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(new RenderingContextSettings(true))
  tempPath: Path2D = new Path2D() //
  @State pathArray: Array<Path2D | undefined> = [] // 所有画图路径信息
  @State removeArray: Array<Path2D | undefined> = [] // 回退的路径集合
  @State text: string = ''
  @State eventType: string = ''
  @State mTargetAngelY: number = 40

  build() {
    Column() {
      Row() {
        Button("橡皮擦")
          .onClick(() => {
            this.canvasContext.globalCompositeOperation = 'destination-out';
            this.paintSize = 50;
          })
        Button("画笔")
          .onClick(() => {
            this.canvasContext.globalCompositeOperation = 'source-over';
            this.paintSize = 5;
          })

        Button("清屏")
          .onClick(() => {
            this.canvasContext.clearRect(0, 0, 360, 720)
          })
      }
      .margin({ top: 25 })
      .width('100%')
      .justifyContent(FlexAlign.SpaceEvenly)

      Stack({ alignContent: Alignment.Top }) {
        Canvas(this.canvasContext)
          .width('100%')
          .height('100%')
          .backgroundColor(Color.Yellow)
          .onReady(() => {
            this.pathArray = []
            this.canvasContext.strokeStyle = this.paintColor
            this.canvasContext.lineWidth = this.paintSize
            this.canvasContext.stroke(this.tempPath)
            for (let index = 0; index < this.pathArray.length; index++) {
              this.canvasContext.stroke(this.pathArray[index])
            }
          })
          .onTouch((event?: TouchEvent) => {
            if (event) {
              if (event.type === TouchType.Down) {
                this.eventType = 'Down'
                this.canvasContext.beginPath()
                this.tempPath = new Path2D()
                this.pathArray.push(this.tempPath)
                this.tempPath.moveTo(event.touches[0].x, event.touches[0].y)
                this.canvasContext.moveTo(event.touches[0].x, event.touches[0].y)
              }
              if (event.type === TouchType.Up) {
                this.eventType = 'Up'
              }
              if (event.type === TouchType.Move) {
                this.eventType = 'Move'
                this.tempPath.lineTo(event.touches[0].x, event.touches[0].y)
                this.canvasContext.stroke(this.tempPath)
              }
              this.text = 'TouchType:' + this.eventType + '\n touch point and touch element:\nx: '
                + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nwidth:'
                + event.target.area.width + '\nheight:' + event.target.area.height + '\npathArray size:' +
              this.pathArray.length
            }
          })
        Text(this.text)
      }
    }
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
分享
微博
QQ
微信
回复
2025-01-09 17:30:10
相关问题
AlertDialog没有找到设置背景色API
1042浏览 • 1回复 待解决
没有找到相应的MD5算法实现
1278浏览 • 1回复 待解决
如何清除Web隐私模式下所有cookie。
1206浏览 • 1回复 待解决
HarmonyOS APP有没有清除缓存的接口
1116浏览 • 1回复 待解决
HarmonyOS没有清除通知相关的API
778浏览 • 1回复 待解决
HarmonyOS 文档中没有找到DES加解密
819浏览 • 1回复 待解决
怎么实现类似oc的代理模式
1060浏览 • 1回复 待解决
Canvas画的时候,怎么设置画笔颜色
1058浏览 • 1回复 待解决