鸿蒙Next 中的画布 之 RenderNode 基本用法

RenderNode 一般与 NodeContainer NodeController 一起使用。

基本用法之画一个圆

1 创建 NodeController

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

  makeNode(uiContext: UIContext): FrameNode {
    //创建 node 根节点
    this.rootNode = new FrameNode(uiContext);
    if (this.rootNode !== null) {
      //获取根
      this.rootRenderNode = this.rootNode.getRenderNode();
    }
    return this.rootNode;
  }

  aboutToResize(size: Size): void {
    //获取画布整体大小
    this.width = size.width;
    this.height = size.height;
    if (this.rootRenderNode !== null) {
      //设置根节点大小
      this.rootRenderNode.backgroundColor = 0XFFFFFFFF;
      this.rootRenderNode.frame = {
        x: 0,
        y: 0,
        width: this.width,
        height: this.height
      };
    }
  }
}

2 创建RenderNode

import { DrawContext, RenderNode } from '@ohos.arkui.node';
import drawing from '@ohos.graphics.drawing';
import common2D from '@ohos.graphics.common2D';

export class  CircleRenderNode extends  RenderNode {

  draw(context: DrawContext): void {
    let canvas = context.canvas;

    //创建画笔
    const pen = new drawing.Pen();
    const pen_color: common2D.Color = {
      alpha: 0xFF,
      red: 255,
      green: 0x00,
      blue: 0x00
    };
    pen.setColor(pen_color);
    pen.setDither(true);
    pen.setStrokeWidth(20);
    //设置画笔
    canvas.attachPen(pen);
    //绘制圆
    canvas.drawCircle(100,100,50)
  }
}

3 添加 RenderNode 到 画布

  addCircle(){
    let  circleNode = new CircleRenderNode();
    circleNode.frame = {
      x: 100,
      y: 100,
      width: 100,
      height: 100
    };
    this.myNodeController.rootRenderNode?.appendChild(circleNode);
  }

4 设置NodeController到 NodeContainer

private myNodeController : MyNodeController = new MyNodeController()
NodeContainer(this.myNodeController)
              .width(CommonConstants.FULL_SCREEN)
              .height(CommonConstants.FULL_SCREEN)
              .onClick(()=>{
              this.addCircle();
              })