HarmonyOS鸿蒙Next中为什么drawimage没有显示出来

HarmonyOS鸿蒙Next中为什么drawimage没有显示出来 cke_237.png

@Component
@Entry
export default struct WeightBmiComponent {
  private settings: RenderingContextSettings = new RenderingContextSettings(true);
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600);
  // "/common/images/1234.png"需要替换为开发者所需的图像资源文件
  private img: ImageBitmap = new ImageBitmap("../../resources/base/media/pic_arc.png");

  private _drawBmi() {
    let offContext = this.offCanvas.getContext("2d", this.settings)
    // 使用drawImage接口将图片画在（0，0）为起点，宽高130的区域
    offContext.drawImage(this.img, 0, 0, 130, 130);
    // 使用getImageData接口，获得canvas组件区域中，（50，50）为起点，宽高130范围内的绘制内容
    let imageData = offContext.getImageData(50, 50, 130, 130);
    // 使用putImageData接口将得到的ImageData画在起点为（150， 150）的区域中
    offContext.putImageData(imageData, 150, 150);
    // 将离屏绘制的内容画到canvas组件上
    let image = this.offCanvas.transferToImageBitmap();
    this.context.transferFromImageBitmap(image);
  }

  build() {
    Column() {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() => {
          this._drawBmi();
        })
        .width('100%')
        .height('100%')

    }.width('100%')
    .height('100%')
  }
}

更多关于HarmonyOS鸿蒙Next中为什么drawimage没有显示出来的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

  • 代码中图片路径 “../../resources/base/media/pic_arc.png” 可能不正确。

  • HarmonyOS 的资源文件需要严格放置在 resources/base/media/ 或 resources/rawfile/ 目录下，且路径引用需遵循规范

  • 直接通过 new ImageBitmap("...") 创建图片可能未等待图片加载完成就调用 drawImage，导致绘制失败。

更多关于HarmonyOS鸿蒙Next中为什么drawimage没有显示出来的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，drawImage未显示通常由以下原因导致：

  1. 图像资源路径错误或未正确放置在resources/base/media目录
  2. Canvas绘制时机不当，组件未完成布局时进行绘制
  3. 图像尺寸超过Canvas绘制区域范围
  4. 硬件加速兼容性问题

检查要点：

  • 使用$r(‘app.media.image’)方式引用资源
  • 在onPageShow或组件布局完成后调用绘制方法
  • 确认Canvas尺寸与图像尺寸匹配
  • 检查控制台是否有相关错误日志

可通过设置图像加载监听和添加绘制边界检查来定位具体问题。

在HarmonyOS Next中，drawImage未显示通常是因为图像资源未正确加载或Canvas绘制时机问题。从代码分析：

  1. 图像加载问题：ImageBitmap构造函数直接使用路径可能无法正确加载资源。建议使用资源管理器加载：
private img: image.ImageBitmap = resourceManager.getImageSync($r('app.media.pic_arc'));
  1. 绘制时机：onReady回调中绘制是正确做法，但需确保图像已加载完成。可添加加载完成监听：
// 在build前添加
aboutToAppear() {
  this.img.onload = () => {
    this._drawBmi();
  }
}

  1. 离屏Canvas尺寸：OffscreenCanvas(600,600)可能超出实际Canvas显示区域，建议与实际Canvas尺寸保持一致。

  2. 路径问题：原代码使用相对路径"…/…/resources/base/media/pic_arc.png"，在HarmonyOS中应使用资源引用方式。

建议优先检查图像资源是否正确打包到应用中，并通过调试确认ImageBitmap是否成功创建。

回到顶部