1# Graphics 2 3自定义节点相关属性定义的详细信息。 4 5> **说明：** 6> 7> 本模块首批接口从API version 11开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。 8 9## 导入模块 10 11```ts 12import { DrawContext, Size, Offset, Position, Pivot, Scale, Translation, Matrix4, Rotation, Frame } from "@ohos.arkui.node"; 13``` 14 15## Size 16 17用于返回组件布局大小的宽和高，单位为vp。 18 19**系统能力：** SystemCapability.ArkUI.ArkUI.Full 20 21| 名称 | 类型 | 可读 | 可写 | 说明 | 22| ------ | ------ | ---- | ---- | ---------------------- | 23| width | number | 是 | 是 | 组件的宽度，单位为vp。 | 24| height | number | 是 | 是 | 组件的高度，单位为vp。 | 25 26## Position 27 28用于设置或返回组件的位置。 29 30**系统能力：** SystemCapability.ArkUI.ArkUI.Full 31 32| 名称 | 类型 | 可读 | 可写 | 说明 | 33| ---- | ------ | ---- | ---- | ------------------------ | 34| x | number | 是 | 是 | 水平方向位置，单位为vp。 | 35| y | number | 是 | 是 | 垂直方向位置，单位为vp。 | 36 37## Frame 38 39用于设置或返回组件的布局大小和位置，单位为vp。 40 41**系统能力：** SystemCapability.ArkUI.ArkUI.Full 42 43| 名称 | 类型 | 可读 | 可写 | 说明 | 44| ------ | ------ | ---- | ---- | ------------------------ | 45| x | number | 是 | 是 | 水平方向位置，单位为vp。 | 46| y | number | 是 | 是 | 垂直方向位置，单位为vp。 | 47| width | number | 是 | 是 | 组件的宽度，单位为vp。 | 48| height | number | 是 | 是 | 组件的高度，单位为vp。 | 49 50## Pivot 51 52用于设置组件的轴心坐标，轴心会作为组件的旋转/缩放中心点，影响旋转和缩放效果。 53 54**系统能力：** SystemCapability.ArkUI.ArkUI.Full 55 56| 名称 | 类型 | 可读 | 可写 | 说明 | 57| ---- | ------ | ---- | ---- | ------------------------------------------------------------ | 58| x | number | 是 | 是 | 轴心的X轴坐标。该参数为浮点数，默认值为0.5， 取值范围为[0.0, 1.0]。 | 59| y | number | 是 | 是 | 轴心的Y轴坐标。该参数为浮点数，默认值为0.5， 取值范围为[0.0, 1.0]。 | 60 61## Scale 62 63用于设置组件的缩放比例。 64 65**系统能力：** SystemCapability.ArkUI.ArkUI.Full 66 67| 名称 | 类型 | 可读 | 可写 | 说明 | 68| ---- | ------ | ---- | ---- | -------------------------------------------- | 69| x | number | 是 | 是 | X轴的缩放参数。该参数为浮点数，默认值为1.0。 | 70| y | number | 是 | 是 | Y轴的缩放参数。该参数为浮点数，默认值为1.0。 | 71 72## Translation 73 74用于设置组件的平移量。 75 76**系统能力：** SystemCapability.ArkUI.ArkUI.Full 77 78| 名称 | 类型 | 可读 | 可写 | 说明 | 79| ---- | ------ | ---- | ---- | ---------------------------- | 80| x | number | 是 | 是 | 水平方向的平移量，单位为vp。 | 81| y | number | 是 | 是 | 垂直方向的平移量，单位为vp。 | 82 83## Rotation 84 85用于设置组件的旋转角度。 86 87**系统能力：** SystemCapability.ArkUI.ArkUI.Full 88 89| 名称 | 类型 | 可读 | 可写 | 说明 | 90| ---- | ------ | ---- | ---- | ------------------------------ | 91| x | number | 是 | 是 | x 轴方向的旋转角度，单位为vp。 | 92| y | number | 是 | 是 | y 轴方向的旋转角度，单位为vp。 | 93| z | number | 是 | 是 | z 轴方向的旋转角度，单位为vp。 | 94 95## Offset 96 97用于设置组件或效果的偏移。 98 99**系统能力：** SystemCapability.ArkUI.ArkUI.Full 100 101 102| 名称 | 类型 | 可读 | 可写 | 说明 | 103| ---- | ------ | ---- | ---- | --------------------------- | 104| x | number | 是 | 是 | x轴方向的偏移量，单位为px。 | 105| y | number | 是 | 是 | y轴方向的偏移量，单位为px。 | 106 107## Matrix4 108 109用于设置组件的变换信息，该类型为一个 4x4 矩阵，使用一个长度为16的`number[]`进行表示，例如： 110```ts 111const transform: Matrix4 = [ 112 1, 0, 45, 0, 113 0, 1, 0, 0, 114 0, 0, 1, 0, 115 0, 0, 0, 1 116] 117``` 118 119**系统能力：** SystemCapability.ArkUI.ArkUI.Full 120 121## DrawContext 122 123图形绘制上下文，提供绘制所需的画布宽度和高度。 124 125### size 126 127get size(): Size 128 129获取画布的宽度和高度。 130 131**系统能力：** SystemCapability.ArkUI.ArkUI.Full 132 133**返回值：** 134 135| 类型 | 说明 | 136| ------------- | ---------------- | 137| [Size](#size) | 画布的宽度和高度。 | 138 139### canvas 140 141get canvas(): Canvas 142 143获取用于绘制的画布。 144 145**系统能力：** SystemCapability.ArkUI.ArkUI.Full 146 147**返回值：** 148 149| 类型 | 说明 | 150| ------------- | ---------------- | 151| [Canvas](../apis-arkgraphics2d/js-apis-graphics-drawing.md#canvas) | 用于绘制的画布。 | 152 153**示例：** 154 155```ts 156import { RenderNode, FrameNode, NodeController, DrawContext } from "@ohos.arkui.node"; 157 158class MyRenderNode extends RenderNode { 159 flag: boolean = false; 160 161 draw(context: DrawContext) { 162 const size = context.size; 163 const canvas = context.canvas; 164 } 165} 166 167const renderNode = new MyRenderNode(); 168renderNode.frame = { x: 0, y: 0, width: 100, height: 100 }; 169renderNode.backgroundColor = 0xffff0000; 170 171class MyNodeController extends NodeController { 172 private rootNode: FrameNode | null = null; 173 174 makeNode(uiContext: UIContext): FrameNode | null { 175 this.rootNode = new FrameNode(uiContext); 176 177 const rootRenderNode = this.rootNode.getRenderNode(); 178 if (rootRenderNode !== null) { 179 rootRenderNode.appendChild(renderNode); 180 } 181 182 return this.rootNode; 183 } 184} 185 186@Entry 187@Component 188struct Index { 189 private myNodeController: MyNodeController = new MyNodeController(); 190 191 build() { 192 Row() { 193 NodeContainer(this.myNodeController) 194 } 195 } 196} 197``` 198