图片进行画笔或者马赛克绘制

Canvas(this.viewModel.context) 
  .width('100%') 
  .height('75%') 
  .onAreaChange((oldValue: Area, newValue: Area) => { 
    this.viewModel.canvasAreaChange(newValue) 
  }) 
  .gesture( 
    GestureGroup(GestureMode.Exclusive, 
      PanGesture() 
        .onActionStart((event: GestureEvent) => { 
          let finger: FingerInfo = event.fingerList[0]; 
          if (finger == undefined) { return } 
          let x = finger.localX 
          let y = finger.localY 
          this.viewModel.moveStart(x,y) 
        }) 
        .onActionUpdate((event: GestureEvent) => { 
          let finger: FingerInfo = event.fingerList[0]; 
          if (finger == undefined) { return } 
          let x = finger.localX 
          let y = finger.localY 
          this.viewModel.moveUpdate(x,y) 
        }) 
        .onActionEnd((event: GestureEvent) => { 
          let finger: FingerInfo = event.fingerList[0]; 
          if (finger == undefined) { return } 
          this.viewModel.moveEnd() 
        }) 
    ) 
  ) 
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.

moveStart(x: number, y: number) { 
  this.points.push({x: x, y: y}) 
  this.drawPath.moveTo(x, y) 
  this.drawCurrentPathModel()} 
moveUpdate(x: number, y: number) { 
  let lastPoint = this.points[this.points.length - 1] 
  this.points.push({x: x, y: y}) 
  this.drawPath.quadraticCurveTo((x + lastPoint.x) / 2, (y + lastPoint.y) / 2, x, y) 
  this.drawCurrentPathModel() 
} 
moveEnd() { 
  this.points = [] 
  this.drawPath = new Path2D() 
} 
clearPath() { 
  this.points = [] 
  this.drawPath = new Path2D() 
  this.context.clearRect(0, 0, this.canvasWidth, this.canvasHeight) 
} 
canvasAreaChange(area: Area) { 
  this.canvasHeight = area.height as number 
  this.canvasWidth = area.width as number 
} 
private drawCurrentPathModel() { 
  this.context.globalCompositeOperation = 'source-over' 
  this.context.lineWidth = this.drawModel.lineWidth 
  if (this.drawModel.pathType == DrawPathType.pen) { 
    this.context.strokeStyle = this.drawModel.color 
  } else { 
    if (this.pattern) { 
      this.context.strokeStyle = this.pattern 
    } 
  } 
  this.context.lineJoin = 'round' 
  this.context.stroke(this.drawPath) 
} 
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.