HarmonyOS 自定义绘制接口怎么使用

我们使用自定义绘制相关的框架:

import drawing from “@ohos.graphics.drawing”

import common2D from ‘@ohos.graphics.common2D’

在文档上看到有关于图片的绘制方法,但是调用一直失败不知道哪里有问题(绘制图形,文字都可以正常只是现在绘制图片的接口一直异常),使用代码如下:

import { NodeController, FrameNode, RenderNode, Size } from "@ohos.arkui.node"
import drawing from "@ohos.graphics.drawing"
import common2D from '@ohos.graphics.common2D'
import componentSnapshot from '@ohos.arkui.componentSnapshot';
import image from '@ohos.multimedia.image';
import resourceManager from '@ohos.resourceManager';
import hilog from '@ohos.hilog';


class ImageRenderNode extends RenderNode {

  async draw(context: DrawContext) {
    try {
      const canvas = context.canvas;

      const image1_rawFileDescriptor = getContext().resourceManager.getRawFdSync('1.jpeg')
      const imageSource: image.ImageSource = image.createImageSource(image1_rawFileDescriptor);
      const imagePixelMap = await imageSource.createPixelMap()
      const tmp =await imagePixelMap.getImageInfo()
      canvas.drawImage(imagePixelMap, 0, 0)
    } catch (e) {
      console.log('')
    }

  }
}

class ImageNodeController extends NodeController {
  private rootNode: FrameNode | null = null;
  rootRenderNode: RenderNode | null = null;
  width: number = 0;
  height: number = 0;

  makeNode(uiContext: UIContext): FrameNode {
    this.rootNode = new FrameNode(uiContext);
    if (this.rootNode !== null) {
      this.rootRenderNode = this.rootNode.getRenderNode();
    }
    return this.rootNode;
  }

  aboutToResize(size: Size): void {
    if (this.rootNode) {
      this.width = size.width
      this.height = size.height
      if (this.rootRenderNode) {
        this.rootRenderNode.frame = {
          x: 0,
          y: 0,
          width: this.width,
          height: this.height
        };
        const tmp = new ImageRenderNode()
        tmp.backgroundColor = 0XFFFFF000;
        tmp.frame = {
          x: 0,
          y: 0,
          width: this.width,
          height: this.height
        };
        this.rootRenderNode.appendChild(tmp)

      }
    }
  }
}


@Entry
@Component
struct Page2 {
  private imageNodeController: ImageNodeController = new ImageNodeController()

  build() {

    Column() {
      NodeContainer(this.imageNodeController)
        .width('100%')
        .height('60%')
    }
    .backgroundColor(Color.Gray)
    .height('100%')
    .width('100%')
  }
}
HarmonyOS
2天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
superinsect

代码中需要修改三个地方:

1.文件放在rawfile下面;

2.创建pixelmap用这个接口:imageSource.createPixelMapSync();

3.drawimage要设置options ;

let options = new drawing.SamplingOptions(drawing.FilterMode.FILTER_MODE_NEAREST);
canvas.drawImage(imagePixelMap, 0, 0,options)
//
async draw(context: DrawContext) {
  try {
    const canvas = context.canvas;

    const image1_rawFileDescriptor = getContext().resourceManager.getRawFdSync('aaa.jpeg')
    const imageSource: image.ImageSource = image.createImageSource(image1_rawFileDescriptor);
    const imagePixelMap = imageSource.createPixelMapSync()
    // const tmp =await imagePixelMap.getImageInfo()
    let options = new drawing.SamplingOptions(drawing.FilterMode.FILTER_MODE_NEAREST);
    canvas.drawImage(imagePixelMap, 0, 0,options)
  } catch (e) {
    console.log('')
  }
分享
微博
QQ
微信
回复
2天前
相关问题
HarmonyOS 自定义接口如何使用
224浏览 • 1回复 待解决
HarmonyOS 自定义字体绘制
203浏览 • 1回复 待解决
HarmonyOS 使用自定义字体
416浏览 • 1回复 待解决
HarmonyOS 怎么自定义装饰器
168浏览 • 1回复 待解决
HarmonyOS 使用全局自定义弹窗
168浏览 • 1回复 待解决
HarmonyOS 自定义组件的使用
40浏览 • 1回复 待解决
HarmonyOS 怎么自定义Tab的Tabbar
161浏览 • 1回复 待解决