Harmony画板

settings:RenderingContextSettings = new RenderingContextSettings(true)
canvas:CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

//起点默认左上角
Canvas(this.canvas)
    .width("100%")
    .height("100%")
    .onReady(()=>{
        //自定义起点
        this.canvas.moveTo(this.posLast[0],this.posLast[1])
        this.canvas.lineTo(100,100)
        this.canvas.lineWidth = 10
        this.canvas.strokeStyle = "#5bcbd1"
        //边缘线
        this.canvas.stroke()
        this.canvas.strokeStyle = "#a976b2"
        this.canvas.strokeRect(100,100,100,100)
        this.canvas.fillRect(200,200,100,100)
    })

 Canvas(this.canvas)
        .width("100%")
        .height("100%")
        .onReady(()=>{
          //边缘线
          this.canvas.stroke()
          this.canvas.strokeStyle = "#a976b2"
          this.canvas.strokeRect(100,100,100,100)
          this.canvas.fillRect(200,200,100,100)
        })
        .onTouch((event)=>{
          switch(event.type){
            case TouchType.Down:
              this.posLast[0] = event.touches[0].x
              this.posLast[1] = event.touches[0].y
              break
          case TouchType.Up:
          //   console.log("x: "+event.touches[0].x)
          //   console.log("y: "+event.touches[0].y)
            break
            case TouchType.Move:
            this.posNow[0] = event.touches[0].x
            this.posNow[1] = event.touches[0].y
             this.draw()
              break
          case TouchType.Cancel:
          //   console.log("x: "+event.touches[0].x)
          //   console.log("y: "+event.touches[0].y)
            break
        }
    }
)
draw(){
    this.canvas.moveTo(this.posLast[0],this.posLast[1])
    this.canvas.lineTo(this.posNow[0],this.posNow[1])
    this.canvas.strokeStyle = "#5bcbd1"
    this.canvas.lineWidth = 10
    this.canvas.stroke()
    this.posLast[0] = this.posNow[0]
    this.posLast[1] = this.posNow[1]
  }

贝塞尔曲线

class Pos{
  x:number = 0
  y:number = 0
}

@State posLast:number[] = [0,0]
@State posNow:number[] = [0,0]
@State points:Pos[] = []
settings:RenderingContextSettings = new RenderingContextSettings(true)
canvas:CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

Canvas(this.canvas)
    .width("100%")
    .height("100%")
    .onReady(()=>{
        //边缘线
        this.canvas.stroke()
        this.canvas.strokeStyle = "#a976b2"
        this.canvas.strokeRect(100,100,100,100)
        this.canvas.fillRect(200,200,100,100)
    })
    .onTouch((event)=>{
        switch(event.type){
        case TouchType.Down:
            this.posLast[0] = event.touches[0].x
            this.posLast[1] = event.touches[0].y
            this.draw(event.touches[0].x,event.touches[0].y)
            break
        case TouchType.Up:
            //复原
            this.points = []
            break
        case TouchType.Move:
            this.posNow[0] = event.touches[0].x
            this.posNow[1] = event.touches[0].y
            break
        case TouchType.Cancel:
            break
        }
    })
draw(x:number,y:number){
    this.points.push({
         x:x,y:y
    })
    if(this.points.length<1)return
    //四个点时绘制贝塞尔曲线
    if(this.points.length>3){
        //this.points[this.points.length-1]是指points数组的最后一个点
        //以采到ABC三个点为例，此时计算BC中点B1，this.points[this.points.length-1]为C，-2为B
        this.posNow[0] = (this.points[this.points.length-1].x+this.points[this.points.length-2].x)/2
        this.posNow[1] = (this.points[this.points.length-1].y+this.points[this.points.length-2].y)/2
        //控制点计算
        //此时控制点即ABC中点B
        let controlX = this.points[this.points.length-2].x
        let controlY = this.points[this.points.length-2].y
        //以上已经获得待绘制的贝塞尔曲线所需参数

        //这里是计算下次绘制的起点以与绘制的贝塞尔曲线无缝衔接，以实现圆滑的效果
        this.posLast[0] = (this.points[this.points.length-2].x+this.points[this.points.length-3].x)/2
        this.posLast[1] = (this.points[this.points.length-2].y+this.points[this.points.length-3].y)/2
        //移动回上一个点
        this.canvas.moveTo(this.posLast[0],this.posLast[1])
        //二阶贝塞尔曲线，一个控制点。越高阶控制点越多
        this.canvas.quadraticCurveTo(controlX,controlY,this.posNow[0],this.posNow[1])
        this.canvas.stroke()
        this.canvas.lineWidth = 5
        this.canvas.strokeStyle = "#a976b2"
    }
    else{}
}