【画龙迎春】使用canvas画出心中的龙 HarmonyOS 鸿蒙Next

import window from '[@ohos](/user/ohos).window';
import promptAction from '[@ohos](/user/ohos).promptAction';

[@Entry](/user/Entry)
[@Component](/user/Component)
struct CanvasIndex {
  private lastX: number = 0;
  private lastY: number = 0;
  private isDown: Boolean = false;
  private isErasing: Boolean = false;
  private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.All, distance: 1 })
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

  clickPen() {
    this.isDown = true
    this.isErasing = false
    promptAction.showToast({ message: '画笔' })
  }

  clickRubber() {
    this.isDown = false
    this.isErasing = true
    promptAction.showToast({ message: '橡皮' })
  }

  clickClear() {
    this.context.clearRect(0, 0, 1200, 500)
    promptAction.showToast({ message: '清空' })
  }

  clickColor() {
    promptAction.showToast({ message: '颜色板' })
  }

  build() {
    Stack({ alignContent: Alignment.BottomStart }) {
      Row() {
        CanvasTools('画笔', this.clickPen.bind(this))
        CanvasTools('橡皮', this.clickRubber.bind(this))
        CanvasTools('清空', this.clickClear.bind(this))
        CanvasTools('调色', this.clickColor.bind(this))
      }.width('100%').margin({ bottom: 10 }).zIndex(2)

      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#c0c0c0')
        .onReady(() => {
          this.context.lineWidth = 3;
          this.context.strokeStyle = "#0F0";
        })
        .gesture(
          PanGesture(this.panOption)
            .onActionStart((event: any) => {
              this.lastX = event.localX;
              this.lastY = event.localY;
            })
            .onActionUpdate((event: any) => {
              if (this.isDown) {
                const offsetX = event.localX
                const offsetY = event.localY
                this.draw(this.lastX, this.lastY, offsetX, offsetY);
                this.lastX = offsetX;
                this.lastY = offsetY;
              }
              if (this.isErasing) {
                const offsetX = event.localX
                const offsetY = event.localY
                this.arc(this.lastX, this.lastY, 10, 0, 2 * Math.PI)
                this.lastX = offsetX;
                this.lastY = offsetY;
              }
            })
            .onActionEnd(() => {
              this.context.closePath();
            })
        )
    }.width('100%').height('100%)
  }

  draw(startX, startY, endX, endY) {
    this.context.beginPath();
    this.context.globalCompositeOperation = 'source-over'
    this.context.lineCap = 'round'
    this.context.moveTo(startX, startY);
    this.context.lineTo(endX, endY);
    this.context.stroke();
  }

  arc(x: number, y: number, radius: number, startAngle: number, endAngle: number) {
    this.context.beginPath()
    this.context.arc(x, y, radius, startAngle, endAngle)
    this.context.globalCompositeOperation = 'destination-out'
    this.context.strokeStyle = '#FF0000'
    this.context.stroke()
  }

  onPageShow() {
    let orientation = window.Orientation.LANDSCAPE_INVERTED;
    try {
      globalThis.windowClass.setPreferredOrientation(orientation, (err) => {});
    } catch (exception) {
      console.error('设置失败: ' + JSON.stringify(exception));
    }
  }
}

[@Builder](/user/Builder) function CanvasTools(txt: string, onClick: () => void) {
  Column() {
    Text(txt).fontColor('#A3000000').fontSize(16).onClick(onClick)
  }.layoutWeight(1)
}

我在用橡皮的时候，为什么感觉不是很跟手