1# Graphics 2 3The **Graphics** module provides APIs for defining attributes of a custom node. 4 5> **NOTE** 6> 7> The initial APIs of this module are supported since API version 11. Newly added APIs will be marked with a superscript to indicate their earliest API version. 8 9## Modules to Import 10 11```ts 12import { DrawContext, Size, Offset, Position, Pivot, Scale, Translation, Matrix4, Rotation, Frame } from "@ohos.arkui.node"; 13``` 14 15## Size 16 17Returns the width and height of the component, in vp. 18 19**System capability**: SystemCapability.ArkUI.ArkUI.Full 20 21| Name | Type | Readable| Writable| Description | 22| ------ | ------ | ---- | ---- | ---------------------- | 23| width | number | Yes | Yes | Width of the component, in vp.| 24| height | number | Yes | Yes | Height of the component, in vp.| 25 26## Position 27 28Sets or returns the position of the component. 29 30**System capability**: SystemCapability.ArkUI.ArkUI.Full 31 32| Name| Type | Readable| Writable| Description | 33| ---- | ------ | ---- | ---- | ------------------------ | 34| x | number | Yes | Yes | Horizontal position, in vp.| 35| y | number | Yes | Yes | Vertical position, in vp.| 36 37## Frame 38 39Sets or returns the size and position of the component, in vp. 40 41**System capability**: SystemCapability.ArkUI.ArkUI.Full 42 43| Name | Type | Readable| Writable| Description | 44| ------ | ------ | ---- | ---- | ------------------------ | 45| x | number | Yes | Yes | Horizontal position, in vp.| 46| y | number | Yes | Yes | Vertical position, in vp.| 47| width | number | Yes | Yes | Width of the component, in vp. | 48| height | number | Yes | Yes | Height of the component, in vp. | 49 50## Pivot 51 52Sets the pivot of the component. As the rotation or scaling center of the component, the pivot affects the rotation and scaling effects. 53 54**System capability**: SystemCapability.ArkUI.ArkUI.Full 55 56| Name| Type | Readable| Writable| Description | 57| ---- | ------ | ---- | ---- | ------------------------------------------------------------ | 58| x | number | Yes | Yes | X coordinate of the pivot. The value is a floating point number in the range [0.0, 1.0], and the default value is **0.5**.| 59| y | number | Yes | Yes | Y coordinate of the pivot. The value is a floating point number in the range [0.0, 1.0], and the default value is **0.5**.| 60 61## Scale 62 63Sets the scale factor of the component. 64 65**System capability**: SystemCapability.ArkUI.ArkUI.Full 66 67| Name| Type | Readable| Writable| Description | 68| ---- | ------ | ---- | ---- | -------------------------------------------- | 69| x | number | Yes | Yes | Scale factor along the x-axis. The value is a floating point number, and the default value is **1.0**.| 70| y | number | Yes | Yes | Scale factor along the y-axis. The value is a floating point number, and the default value is **1.0**.| 71 72## Translation 73 74Sets the translation amount of the component. 75 76**System capability**: SystemCapability.ArkUI.ArkUI.Full 77 78| Name| Type | Readable| Writable| Description | 79| ---- | ------ | ---- | ---- | ---------------------------- | 80| x | number | Yes | Yes | Horizontal translation amount, in vp.| 81| y | number | Yes | Yes | Vertical translation amount, in vp.| 82 83## Rotation 84 85Sets the rotation angle of the component. 86 87**System capability**: SystemCapability.ArkUI.ArkUI.Full 88 89| Name| Type | Readable| Writable| Description | 90| ---- | ------ | ---- | ---- | ------------------------------ | 91| x | number | Yes | Yes | Rotation angle along the x-axis, in vp.| 92| y | number | Yes | Yes | Rotation angle along the y-axis, in vp.| 93| z | number | Yes | Yes | Rotation angle along the z-axis, in vp.| 94 95## Offset 96 97Sets the offset of the component or effect. 98 99**System capability**: SystemCapability.ArkUI.ArkUI.Full 100 101| Name| Type | Readable| Writable| Description | 102| ---- | ------ | ---- | ---- | ---------------------------- | 103| x | number | Yes | Yes | Offset along the y-axis, in vp.| 104| y | number | Yes | Yes | Offset along the y-axis, in vp.| 105 106## Matrix4 107 108Sets the transformation information of the component, which is a 4 x 4 matrix represented by a 16-bit number[]. For example: 109```ts 110const transform: Matrix4 = [ 111 1, 0, 45, 0, 112 0, 1, 0, 0, 113 0, 0, 1, 0, 114 0, 0, 0, 1 115] 116``` 117 118**System capability**: SystemCapability.ArkUI.ArkUI.Full 119 120## DrawContext 121 122Graphics drawing context, which provides the canvas width and height required for drawing. 123 124### size 125 126get size(): Size 127 128Obtains the width and height of the canvas. 129 130**System capability**: SystemCapability.ArkUI.ArkUI.Full 131 132**Return value** 133 134| Type | Description | 135| ------------- | ---------------- | 136| [Size](#size) | Width and height of the canvas.| 137