HarmonyOS 鸿蒙Next Canvas绘制,重绘时间很短(低于16ms),但是视觉上很卡

发布于 1周前 作者 eggper 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next Canvas绘制,重绘时间很短(低于16ms),但是视觉上很卡

@Component
export struct CanvasView {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private renderContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  @StorageLink('validateCanvas') @Watch('redraw') private isValidate: boolean = true;

  redraw() {
    this.renderContext.reset();
    let t1 =
      Date.now();
    // 绘制逻辑 
    let t2 = Date.now();
    logger.debug(`canvas 绘制时间=${(t2 - t1)}ms`);
  }

  build() {
    Stack() {
      Canvas(this.renderContext)
        .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
        .width('100%')
        .height('100%')
        .backgroundColor(Color.Red)
        .transform(this.matrix)
        .backgroundColor(Color.White)
        .padding(this.calcPadding(this.isValidate))
        .onReady(() => {
          logger.debug("绘制流程 Canvas onReady");
          this.gestureAttacher.init();
          this.redraw();
        })
    }
  }
}

  当我打开屏幕录制时,绘制非常流畅,关闭屏幕录制后很卡


更多关于HarmonyOS 鸿蒙Next Canvas绘制,重绘时间很短(低于16ms),但是视觉上很卡的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复
先按照裁剪和多线程的方案自行优化

裁剪参考链接:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-offscreencanvasrenderingcontext2d-V5#drawimage

手势事件,绘制频率太高了,降低绘制频率可以解决视觉卡的问题

更多关于HarmonyOS 鸿蒙Next Canvas绘制,重绘时间很短(低于16ms),但是视觉上很卡的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


HarmonyOS 鸿蒙Next Canvas绘制过程中,若重绘时间虽短(低于16ms),但视觉上出现卡顿现象,可能原因包括:

  1. 渲染管道效率:尽管CPU处理时间达标,但GPU渲染或合成层处理可能存在瓶颈,导致帧无法及时呈现。

  2. 资源加载延迟:图像、字体等资源加载速度若慢,会在绘制时造成卡顿,即便主绘制逻辑耗时短。

  3. UI线程阻塞:即便重绘逻辑本身快速,UI线程上的其他任务(如网络请求、文件读写)也可能导致界面响应延迟。

  4. 动画与过渡效果:复杂的动画或过渡效果,即便单次绘制耗时短,累积起来也可能影响流畅度。

  5. 内存与资源管理:内存泄漏或资源管理不当,导致系统资源紧张,影响绘制性能。

  6. 屏幕刷新率不匹配:设备屏幕刷新率与绘制帧率不匹配,可能导致视觉上的不连贯。

针对上述问题,需具体分析代码与资源使用情况,优化渲染管道、资源加载策略、UI线程管理、动画效果及内存管理。同时,确保设备性能与绘制需求相匹配。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部