HarmonyOS Canvas中关于绘制图片问题？

Question

代码机构如图，图片的路径如下所示。但是图片绘制不出来,是图片的路径不对吗？

Answer 1

解决方案

引用HSP中的组件，可以使用转成PixelMap方法加载。如下demo：

import { resourceManager } from '@kit.LocalizationKit' 
import { image } from '@kit.ImageKit' 
@Component 
export struct LoadingView { 
  private settings: RenderingContextSettings = new RenderingContextSettings(true) 
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 
  async drawImage() { 
    const resourceMgr: resourceManager.ResourceManager = getContext(this).resourceManager 
    const fileData: Uint8Array = await resourceMgr.getMediaContent($r('app.media.startIcon')) 
    const buffer = fileData.buffer 
    const imageSource: image.ImageSource = image.createImageSource(buffer) 
    const pixelMap: image.PixelMap = await imageSource.createPixelMap() 
    pixelMap.getImageInfo().then((info) => { 
      this.context.drawImage(pixelMap, 0, 0, 100, 100, 0, 0, 100, 100) 
    }) 
  } 
  build() { 
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 
  Canvas(this.context) 
    .width('100%') 
    .height('100%') 
    .backgroundColor('#F5DC62') 
    .onReady(() => { 
      this.drawImage() 
    }) 
} 
.width('100%') 
.height('100%') 
 
  } 
}