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

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

HarmonyOS
2024-05-23 22:56:17
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
sdp001

使用的核心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

分享
微博
QQ
微信
回复
2024-05-24 22:29:45
相关问题
使用Drawing进行2d图像绘制
451浏览 • 1回复 待解决
Canvas如何绘制app.media下面的图片?
968浏览 • 1回复 待解决
canvas怎么绘制资源目录下的图片
244浏览 • 1回复 待解决
基于PhotoViewPicker对图片进行操作
191浏览 • 1回复 待解决
分布式如何读写图库图片或者视频?
3264浏览 • 1回复 待解决
基于ImageKit对图片进行处理
196浏览 • 1回复 待解决
通过web上传图片进行预览
427浏览 • 1回复 待解决
如何对图片进行高斯模糊处理
719浏览 • 1回复 待解决
如何对相册图片进行编辑裁剪
759浏览 • 1回复 待解决
对指定url的图片进行下载保存
448浏览 • 1回复 待解决
从本机获取图片进行上传到spring后端
1269浏览 • 1回复 待解决
SurfaceProvider绘制延迟
6117浏览 • 4回复 已解决