HarmonyOS CanvasRenderingContext2D中drawImage绘制图片无法展示？

Question

使用CanvasRenderingContext2D的drawImage方法绘制的图片不展示。

private img:ImageBitmap = new ImageBitmap("/components/component/example.jpg")
Canvas(this.context)
  .width('100%')
  .height('100%')
  .backgroundColor('#44ffff00')
  .onReady(() =>{
    this.context.drawImage( this.img,500,500)
  })

Answer 1

参考demo：

@Entry
@Component
struct Index {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  img = new ImageBitmap('test.png')
  @State canvasHeight: number = 300;
  build() {
    Column() {
      Canvas(this.context)
        .onReady(async () => {
          const width = this.img.width;
          const height = this.img.height;
          this.canvasHeight = width;
          this.context.drawImage(this.img, 0, 0, height, width)
        })
        .height(this.canvasHeight)
        .width('100%')
        .backgroundColor(Color.Pink)
    }
  }
}