【HarmonyOS NEXT】Canvas画布绘制性能瓶颈

【关键字】

Canvas / globalAlpha / app闪退 / 绘制path2D / 马克笔的画笔颜色透明度

【问题描述】

1、Canvas画板绘制多条路径, 进行缩放, 缩放过程出现App闪退, 无闪退日志。

2、画布监听首饰进行绘制时globalAlpha效果不对, 缩放之后效果正常。

如下图: 缩放之后整条线有明显的透明度, 缩放之前线的最下端有轻微的透明度。

图1

图2

场景描述：

缩放过程中利用setTimeOut进行频率控制, 路径缩放使用画布组件放大和setTransform进行缩放实现,。

相关逻辑方法为:

• containerPinchGestureUpdate 缩放监听

• updateScale/updateContainerOffset 手势数据处理

• updateContainerOffset 缩放绘制方法

【问题分析】

1、画布组件放大会导致app闪退：

原因：每次放大画布组件都会频繁触发PinchGesture().onActionUpdate()回调，回调中的containerPinchGestureUpdate(event)方法的调用链中的containerScaleDidUpdate方法中的语句this.offCanvas = new OffscreenCanvas(this.canvasWidth, this.canvasHeight)会申请一个新的离线画布，每次申请都会占用内存，导致占用内存过多应用崩溃。

2、马克笔的画笔颜色在缩放之后才有透明度：

原因：绘制需要缩放之后才有透明度是因为绘制path2D时每次绘制都会把之前的路径绘制，多次绘制叠加看起来没有透明度，缩放后才有透明度是因为缩放后重新绘制了，只绘制了一次。

【解决方案】

1、画布组件放大会导致app闪退：

解决方案：将new OffscreenCanvas此行代码注释掉后没有崩溃问题。建议不要每次都创建一块新的离屏画布，使用一个离屏画布然后改变其宽高来解决该问题。

2、马克笔的画笔颜色在缩放之后才有透明度：

解决方案：在drawCurrentPathModel()方法中不要直接使用this.context.stroke(item.path)绘制路径，而是使用clearRect清空画布后对当前已有路径进行重绘。