解决Canvas画布缩放时闪烁

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

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

使用的核心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. 遇到问题: 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); 
}

注明适配的版本信息

IDE版本:4.1.3.500

SDK版本:OpenHarmony 4.1.0(11)

分享
微博
QQ
微信
回复
2024-05-24 22:28:51
相关问题
鸿蒙Drawing API的缩放怎么使用
340浏览 • 1回复 待解决
Swiper 组件嵌套图片刷新数据会闪烁
382浏览 • 1回复 待解决
WebView支持页面缩放吗?
488浏览 • 1回复 待解决
如何通过定时器和画布实现一个时钟
407浏览 • 1回复 待解决
Web组件如何开启手势缩放
652浏览 • 1回复 待解决
canvas 貌似不识别啊?
5379浏览 • 1回复 待解决
The <canvas> component does not exist.
7137浏览 • 3回复 待解决
如何操作canvas重新绘制
431浏览 • 1回复 待解决
canvas如何实现水印效果
423浏览 • 1回复 待解决
Canvas绘制内容如何动态更新
481浏览 • 1回复 待解决
Canvas如何触发刷新重复绘制?
396浏览 • 1回复 待解决
如何使用canvas添加水印
468浏览 • 1回复 待解决