1# @ohos.arkui.componentUtils (componentUtils) 2 3The **componentUtils** module provides API for obtaining the coordinates and size of the drawing area of a component. 4 5> **NOTE** 6> 7> The APIs of this module are supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version. 8> 9> The functionality of this module depends on UI context. This means that the APIs of this module cannot be used where the UI context is unclear. For details, see [UIContext](./js-apis-arkui-UIContext.md#uicontext). 10> 11> Since API version 10, you can use the [getComponentUtils](./js-apis-arkui-UIContext.md#getcomponentutils) API in **UIContext** to obtain the **ComponentUtils** object associated with the current UI context. For this API to work correctly, call it after the notification indicating completion of component layout is received through [@ohos.arkui.inspector (layout callback)](js-apis-arkui-inspector.md). 12 13## Modules to Import 14 15```ts 16import componentUtils from '@ohos.arkui.componentUtils' 17``` 18## componentUtils.getRectangleById 19 20getRectangleById(id: string): ComponentInfo 21 22Obtains a **ComponentInfo** object based on the component ID. 23 24**System capability**: SystemCapability.ArkUI.ArkUI.Full 25 26**Parameters** 27 28| Name| Type | Mandatory| Description | 29| ------ | ------ | ---- | ---------- | 30| id | string | Yes | Component ID.| 31 32**Return value** 33 34| Type | Description | 35| ------ | ---------- | 36| [ComponentInfo](#componentinfo) | **ComponentInfo** object, which provides the size, position, translation, scaling, rotation, and affine matrix information of the component.| 37 38**Example** 39 40```ts 41import componentUtils from '@ohos.arkui.componentUtils'; 42let modePosition:componentUtils.ComponentInfo = componentUtils.getRectangleById("onClick"); 43``` 44 45## ComponentInfo 46 47**System capability**: SystemCapability.ArkUI.ArkUI.Full 48 49| Name | Type | Mandatory | Description | 50| ---------------|------------ | -----------------------------| -----------------------------| 51| size | [Size](#size) | Yes| Component size. | 52| localOffset | [Offset](#offset) | Yes| Offset of the component relative to the parent component. | 53| windowOffset | [Offset](#offset) | Yes| Offset of the component relative to the window. | 54| screenOffset | [Offset](#offset) | Yes| Offset of the component relative to the screen. | 55| translate | [TranslateResult](#translateresult) | Yes| Translation of the component. | 56| scale | [ScaleResult](#scaleresult) | Yes| Scaling of the component. | 57| rotate | [RotateResult](#rotateresult) | Yes| Rotation of the component. | 58| transform | [Matrix4Result](#matrix4result) | Yes| Affine matrix of the component, which is a 4 x 4 matrix object created based on the input parameter. | 59 60### Size 61 62**System capability**: SystemCapability.ArkUI.ArkUI.Full 63 64| Name | Type| Mandatory| Description | 65| -------- | ---- | ----------------------------------| ----------------------------------| 66| width | number | Yes| Component width.<br>Unit: px | 67| height | number | Yes| Component height.<br>Unit: px | 68 69### Offset 70 71**System capability**: SystemCapability.ArkUI.ArkUI.Full 72 73| Name | Type| Mandatory| Description | 74| --------| ---- | -----------------------------------| -----------------------------------| 75| x | number | Yes| X coordinate.<br>Unit: px | 76| y | number | Yes| Y coordinate.<br>Unit: px | 77 78### TranslateResult 79 80**System capability**: SystemCapability.ArkUI.ArkUI.Full 81 82| Name | Type| Mandatory| Description | 83| --------| ---- | -----------------------------------| -----------------------------------| 84| x | number | Yes| Translation distance along the x-axis.<br>Unit: px | 85| y | number | Yes| Translation distance along the y-axis.<br>Unit: px | 86| z | number | Yes| Translation distance along the z-axis.<br>Unit: px | 87 88### ScaleResult 89 90**System capability**: SystemCapability.ArkUI.ArkUI.Full 91 92| Name | Type| Mandatory| Description | 93| --------| ---- | -----------------------------------| -----------------------------------| 94| x | number | Yes| Scale factor along the x-axis.<br>Unit: px | 95| y | number | Yes| Scale factor along the y-axis.<br>Unit: px | 96| z | number | Yes| Scale factor along the z-axis.<br>Unit: px | 97| centerX | number | Yes| X coordinate of the center point.<br>Unit: px | 98| centerY | number | Yes| Y coordinate of the center point.<br>Unit: px | 99 100### RotateResult 101 102**System capability**: SystemCapability.ArkUI.ArkUI.Full 103 104| Name | Type| Mandatory| Description | 105| --------| ---- | -----------------------------------| -----------------------------------| 106| x | number | Yes| X coordinate of the rotation vector.<br>Unit: px | 107| y | number | Yes| Y coordinate of the rotation vector.<br>Unit: px | 108| z | number | Yes| Z coordinate of the rotation vector.<br>Unit: px | 109| angle | number | Yes| Rotation angle.<br>Unit: px | 110| centerX | number | Yes| X coordinate of the center point.<br>Unit: px | 111| centerY | number | Yes| Y coordinate of the center point.<br>Unit: px | 112 113### Matrix4Result 114 115**System capability**: SystemCapability.ArkUI.ArkUI.Full 116 117| Value Range | Description | 118| --------| -----------------------------------| 119| [number,number,number,number,<br>number,number,number,number,<br>number,number,number,number,<br>number,number,number,number] | A number array whose length is 16 (4 x 4). The unit is px. For details, see **4 x 4 matrix description**. | 120 121**4 x 4 matrix description** 122 123| Name| Type | Mandatory| Description | 124| ------ | ------ | ---- | ------------------------------------ | 125| m00 | number | Yes | Scale factor along the x-axis. Defaults to **1** for the identity matrix. | 126| m01 | number | Yes | The second value, which is affected by the rotation of the x, y, and z axes. | 127| m02 | number | Yes | The third value, which is affected by the rotation of the x, y, and z axes. | 128| m03 | number | Yes | Meaningless value. | 129| m10 | number | Yes | The fifth value, which is affected by the rotation of the x, y, and z axes. | 130| m11 | number | Yes | Scale factor along the y-axis. Defaults to **1** for the identity matrix. | 131| m12 | number | Yes | The seventh value, which is affected by the rotation of the x, y, and z axes. | 132| m13 | number | Yes | Meaningless value. | 133| m20 | number | Yes | The ninth value, which is affected by the rotation of the x, y, and z axes. | 134| m21 | number | Yes | The tenth value, which is affected by the rotation of the x, y, and z axes. | 135| m22 | number | Yes | Scale factor along the z-axis. Defaults to **1** for the identity matrix. | 136| m23 | number | Yes | Meaningless value. | 137| m30 | number | Yes | Translation value of the x-axis, in px. Defaults to **0** for the unit matrix.| 138| m31 | number | Yes | Translation value of the y-axis, in px. The default value is **0** for the identity matrix.| 139| m32 | number | Yes | Translation value of the z-axis, in px. The default value is **0** for the identity matrix.| 140| m33 | number | Yes | Valid in homogeneous coordinates, presenting the perspective projection effect. | 141 142**Example** 143 144 ```ts 145import matrix4 from '@ohos.matrix4'; 146import componentUtils from '@ohos.arkui.componentUtils'; 147 148@Entry 149@Component 150struct Utils { 151 @State x: number = 120; 152 @State y: number = 10; 153 @State z: number = 100; 154 @State value: string = ''; 155 private matrix1 = matrix4.identity().translate({ x: this.x, y: this.y, z: this.z }); 156 157 build() { 158 Column() { 159 Image($r("app.media.icon")) 160 .transform(this.matrix1) 161 .translate({ x: 100, y: 10, z: 50 }) 162 .scale({ x: 2, y: 0.5, z: 1 }) 163 .rotate({ 164 x: 1, 165 y: 1, 166 z: 1, 167 centerX: '50%', 168 centerY: '50%', 169 angle: 300 170 }) 171 .width("40%") 172 .height(100) 173 .key("image_01") 174 Button() { 175 Text('getRectangleById').fontSize(40).fontWeight(FontWeight.Bold); 176 }.margin(20) 177 .onClick(() => { 178 this.value = JSON.stringify(componentUtils.getRectangleById("image_01")) 179 }).id('onClick') 180 Text(this.value) 181 .margin(20) 182 .width(300) 183 .height(400) 184 .borderWidth(2) 185 } 186 } 187} 188 ``` 189