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

Question

需求描述

通过pan手势在图片上绘制图形以及打马赛克

Answer 1

使用的核心API

手势事件以及Canvas画布

核心代码

1. 给画布添加移动手势

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()
        })
    )
  ) 

2. 绘制路径 以及马赛克

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)
} 

马赛克的关键点： 其实就是设置 RenderingContext 线条的颜色，线条支持image

IDE版本：4.1.3.500

SDK版本：api11