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

【总结】

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


更多关于HarmonyOS鸿蒙Next中Canvas画布缩放时已有的绘画路径会闪烁或移动问题如何处理的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于HarmonyOS鸿蒙Next中Canvas画布缩放时已有的绘画路径会闪烁或移动问题如何处理的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中,Canvas画布缩放时已有的绘画路径会闪烁或移动的问题

在HarmonyOS鸿蒙Next中,Canvas画布缩放时已有的绘画路径会闪烁或移动的问题,可以通过设置临界点来减少频繁绘制。具体方法是在手势捏合持续回调中,只有当捏合比例大于某个值时才重新绘制。代码示例如下:

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

通过这种方式,可以减少频繁绘制,提高性能体验。

回到顶部