解决Canvas画布缩放时闪烁

绘制图片后，我们经常需要使用捏合手势将图形缩放

HarmonyOS

xiaohur

2024-05-23 22:54:42

浏览

回答 1

按赞同

按时间

好难的昵称

使用的核心API

手势事件以及Canvas画布

问题的描述与解释

Canvas画布缩放时已有的绘画路径会闪烁或移动

点击标注进入页面，使用任意一种画笔绘制后，缩放页面，会出现绘制线条闪动的问题

闪烁或移动的原因：

setTimeout(async ()=> { 
  if (tempScale != this.scale) { 
    XYLogger.debug(`tempScale update exit`); 
    return; 
  } 
  this.drawViewModel.containerScaleDidUpdate(this.scale, this.containerOffsetX, this.containerOffsetY)}, 10)1.
2.
3.
4.
5.
6.

在更新绘制的图案的时候采用的是延迟操作，所以会有闪烁

解决的思路以及核心代码解释

1. 要实现的效果：绘制的图形要随着捏合的手势进行缩放

2. 遇到问题： Canvas 设计的是，Canvas组件发生大小变化，画布的内容将会被清空，导致之前的绘制的内容被清除，需要根据新的比例重新绘制图形，捏合手势持续回调，会大量的调用重绘代码。这个就造成了卡顿

3. 解决思路：在 Canvas 设计不变的情况下，唯一能做的就是减少重绘代码调用平次。设计一系列条件点，只有满足该系列条件，才能触发回调重绘，条件设置的越紧，调用的就相对越少，性能就越优越，但是在超过一定条件，肉眼就可以识别出

4. 具体实现：

// 解决问题的思路：也是尽可能的减少捏合手势持续调用绘制内容。简单的设置一个临界点，在手势捏合持续回调中，只有满足一定条件才重新绘制// 目前测试不会卡顿以及闪烁，这个临界值以及以什么为参照，开发者可以以最合理的方式处理// 通过捏合比例大于某个值得时候才重新绘制

if (Math.abs(offsetX - this.lastOffsetX) < 0.5 && Math.abs(offsetY - this.lastOffsetY) < 0.5) { 
  return  
} 
console.log('wza ++') 
this.lastOffsetX = offsetX 
this.lastOffsetY = offsetY 
this.context.clearRect(0, 0, this.canvasWidth, this.canvasHeight) 
if (this.useTransform) { 
  this.context.setTransform(scale, 0, 0, scale, 0, 0); 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

注明适配的版本信息

IDE版本：4.1.3.500

SDK版本：OpenHarmony 4.1.0（11）

2024-05-24 22:28:51

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

解决Canvas画布缩放时闪烁

订阅鸿蒙技术特刊，精选内容抢先看