// xxx.ets
@Entry
@Component
struct ImageExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private img:ImageBitmap = new ImageBitmap("common/images/example.jpg")
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
.width('100%')
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
this.context.drawImage( this.img,0,0,500,500,0,0,400,200)
})
}
.width('100%')
.height('100%')
}
}
在module里绘制ImageBitmap,图片存放在当前module的ets目录下,绘制不出来,把图片放在entry module的ets目录下就可以,为什么?
string格式用于加载本地图片,例如ImageBitmap("common/images/example.jpg"),type为"entry"和"feature"类型的Module,其图片加载路径的起点为当前Module的ets文件夹,type为"har"和"shared"类型的Module,其图片加载路径的起点为当前构建的"entry"或"feature"类型Module的ets文件夹。请参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-components-canvas-imagebitmap-V5