HarmonyOS 画布问题咨询

import { NodeController, FrameNode, RenderNode, DrawContext } from "@ohos.arkui.node"  
import { UIContext } from '@ohos.arkui.UIContext'  
import drawing from "@ohos.graphics.drawing"  
import common2D from '@ohos.graphics.common2D'  
  
@Entry  
@Component  
struct RenderTest {  
  private myNodeController: MyNodeController = new MyNodeController()  
  
  
  build() {  
    Column() {  
      Row() {  
        NodeContainer(this.myNodeController)  
          .height('100%')  
        Button("矩形")  
          .margin({ bottom: 200, right: 12 })  
          .onClick(() => {  
            this.myNodeController.clearNodes()  
            this.myNodeController.addNode(rectNode)  
          })  
      }  
      .width('100%')  
      .justifyContent(FlexAlign.Center)  
      .shadow(ShadowStyle.OUTER_DEFAULT_SM)  
      .alignItems(VerticalAlign.Bottom)  
      .layoutWeight(1)  
    }  
  }  
}  
  
//6.绘制矩形。使用canvas中的drawRect接口绘制矩形。  
class RectRenderNode extends RenderNode {  
  async draw(context: DrawContext) {  
    const canvas = context.canvas  
    const brush = new drawing.Brush()  
    brush.setColor({alpha: 255, red: 0, green: 255, blue: 0})  
  
    const pen = new drawing.Pen()  
    pen.setStrokeWidth(10)  
    pen.setColor({alpha: 255, red: 255, green: 255, blue: 0})  
    canvas.attachPen(pen)  
    canvas.attachBrush(brush)  
    //矩形区域，通过2个坐标点可以描述出一个矩形区域，这2个点分别认为是矩形区域的左上角点与右下角点。  
    canvas.drawRect({ left : 50, right : 300, top : 300, bottom : 600})  
  }  
}  
// 创建一个RectRenderNode对象  
const rectNode = new RectRenderNode()  
// 定义rectNode的像素格式  
rectNode.frame = { x: 90, y: 100, width: 200, height: 800 }  
rectNode.pivot = { x: 0.2, y: 0.8 }  
rectNode.scale = { x: 1, y: 1 }  
//8.创建NodeController子类。  
// 创建NodeController的子类MyNodeController，并在其中定义创建FrameNode的函数。  
// NodeController定义了节点容器的控制器，控制着容器里在生命周期中的节点。FrameNode定义了节点的基本类型，并包含一个RenderNode。  
class MyNodeController extends NodeController {  
  private rootNode: FrameNode | null = null;  
  
  makeNode(uiContext: UIContext): FrameNode {  
    this.rootNode = new FrameNode(uiContext)  
    if (this.rootNode == null) {  
      return this.rootNode  
    }  
    const renderNode = this.rootNode.getRenderNode()  
    if (renderNode != null) {  
      renderNode.frame = { x: 0, y: 0, width: 10, height: 500 }  
      renderNode.pivot = { x: 50, y: 50 }  
    }  
    return this.rootNode  
  }  
  
  //9.创建添加节点的接口。在第8步中创建的MyNodeController类中创建添加RenderNode的接口。  
  addNode(node: RenderNode): void {  
    if (this.rootNode == null) {  
      return  
    }  
    const renderNode = this.rootNode.getRenderNode()  
    if (renderNode != null) {  
      renderNode.appendChild(node)  
    }  
  }  
  
  //10.创建删除节点的接口。在第8步中创建的MyNodeController类中创建删除RenderNode的接口。  
  clearNodes(): void {  
    if (this.rootNode == null) {  
      return  
    }  
    const renderNode = this.rootNode.getRenderNode()  
    if (renderNode != null) {  
      renderNode.clearChildren()  
    }  
  }  
}