画布上绘制图片如何实现?

画布上绘制图片。

HarmonyOS
2024-09-23 11:33:31
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
FengTianYa

核心是要将图片资源转化为PixelMap或ImageBitmap ,然后就可以调用 this.context.drawImage接口来绘图,有两种方式达到效果:

1.可以将图片资源放在ets下的common目录下,这种可以直接读取成ImageBitmap,示例如下:

private img:ImageBitmap = new ImageBitmap(“common/images/icon.jpg”)

2.针对图片是resource类型的,可以将图片先通过resourceMgr的getMediaContent接口读取出buffer,再通过image.createImageSource()转化为imageSource后再通过imageSource.createPixelMap()转成pixelMap,参考代码如下:

@Entry  
@Component  
struct Test5 {  
  private settings: RenderingContextSettings = new RenderingContextSettings(true);  
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);  
  
  async drawImage() {  
    const context = getContext(this);  
    const resourceMgr: resourceManager.ResourceManager = context.resourceManager;  
    const fileData: Uint8Array = await resourceMgr.getMediaContent($r('app.media.milk'));  
    const buffer = fileData.buffer;  
    const imageSource: image.ImageSource = image.createImageSource(buffer);  
    const pixelMap: image.PixelMap = await imageSource.createPixelMap();  
  
    this.context.drawImage(pixelMap, 0, 0)  
  }  
  
  build() {  
    Column({ space: 5 }) {  
      Canvas(this.context)  
        .width(300)  
        .height(300)  
        .border({ width: 1, color: 'red' })  
        .onReady(() => {  
          this.drawImage();  
        })  
    }.width('100%').height('100%')  
  }  
}
分享
微博
QQ
微信
回复
2024-09-23 18:42:55
相关问题
HarmonyOS Canvas中关于绘制图片问题
403浏览 • 1回复 待解决
使用Native、XComponent和EGL绘制图
1010浏览 • 1回复 待解决
画布绘制文字,垂直居中
387浏览 • 1回复 待解决
HarmonyOS 多张画布横向合成一张图片
31浏览 • 1回复 待解决
如何通过定时器和画布实现一个时钟
847浏览 • 1回复 待解决
HarmonyOS 画布问题咨询
265浏览 • 1回复 待解决
鸿蒙如何实现位图绘制
9990浏览 • 1回复 待解决
HarmonyOS 绘制水印如何实现
246浏览 • 1回复 待解决
解决Canvas画布缩放时闪烁
1526浏览 • 1回复 待解决