HarmonyOS 鸿蒙Next Canvas画布缩放时已有的绘画路径会闪烁或移动问题如何处理 鸿蒙场景化案例

HarmonyOS 鸿蒙Next Canvas画布缩放时已有的绘画路径会闪烁或移动问题如何处理 鸿蒙场景化案例

【问题现象】

Canvas画板绘制多条路径，进行缩放，缩放过程已有的绘画路径会闪烁或移动。

【背景知识】

Canvas画布的缩放也就是大小改变的时候，之前在画布绘制的图形会消失，导致重新绘制。

【定位思路】

containerPinchGestureUpdate缩放监听，updateScale/updateContainerOffset手势数据处理，updateContainerOffset缩放绘制方法等一个或多个条件满足时之前绘制的图形会消失，这样就会导致频繁的绘制图形，造成卡顿。

【解决方案】

可以设置一个临界点，在手势捏合持续回调中，只有满足一定条件才重新绘制，尽可能的减少捏合手势持续调用绘制内容，通过捏合比例大于某个值得时候才重新绘制。

代码示例如下：

if (Math.abs(offsetX - this.lastOffsetX) < 0.5 && Math.abs(offsetY - this.lastOffsetY) < 0.5) {
  return
}
this.lastOffsetX = offsetX
this.lastOffsetY = offsetY
this.context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
if (this.useTransform) {
  this.context.setTransform(1, 0, 0, 1, 0, 0);
  this.context.setTransform(scale, 0, 0, scale, 0, 0);
}

【总结】

对于持续高频率回调事件处理，若对性能产生影响，可以自定义控制回调事件的处理频率，增加响应门槛处理机制，提高性能体验。