1# @ohos.arkui.componentUtils (componentUtils) 2 3提供获取组件绘制区域坐标和大小的能力。 4 5> **说明：** 6> 7> 从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8> 9> 本模块功能依赖UI的执行上下文，不可在UI上下文不明确的地方使用，参见[UIContext](./js-apis-arkui-UIContext.md#uicontext)说明。 10 11## 导入模块 12 13```ts 14import { componentUtils } from '@kit.ArkUI'; 15``` 16## componentUtils.getRectangleById<sup>(deprecated)</sup> 17 18getRectangleById(id: string): ComponentInfo 19 20根据组件ID获取组件实例对象，通过组件实例对象将获取的坐标位置和大小同步返回给开发者。 21 22> **说明：** 23> 24> 从API version 18开始废弃，建议使用[UIContext](js-apis-arkui-UIContext.md#uicontext)中的[getComponentUtils](js-apis-arkui-UIContext.md#getcomponentutils)获取[ComponentUtils](js-apis-arkui-UIContext.md#componentutils)实例，再通过此实例调用替代方法[getRectangleById](js-apis-arkui-UIContext.md#getrectanglebyid)。 25> 26> 从API version 10开始，可以通过使用[UIContext](js-apis-arkui-UIContext.md#uicontext)中的[getComponentUtils](js-apis-arkui-UIContext.md#getcomponentutils)方法获取当前UI上下文关联的[ComponentUtils](js-apis-arkui-UIContext.md#componentutils)对象。该接口需要在目标组件布局、完成以后获取目标组件区域大小信息，建议在[@ohos.arkui.inspector(布局回调)](js-apis-arkui-inspector.md)接收到布局完成的通知以后使用该接口。 27 28**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 29 30**系统能力：** SystemCapability.ArkUI.ArkUI.Full 31 32**参数：** 33 34| 参数名 | 类型 | 必填 | 说明 | 35| ------ | ------ | ---- | ---------- | 36| id | string | 是 | 指定组件id。 | 37 38**返回值：** 39 40| 类型 | 说明 | 41| ------ | ---------- | 42| [ComponentInfo](#componentinfo) | 组件大小、位置、平移缩放旋转及仿射矩阵属性信息。 | 43 44**错误码：** 45 46以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)错误码。 47 48| 错误码ID | 错误信息 | 49| ------ | ------------------- | 50| 100001 | UI execution context not found. | 51 52**示例：** 53 54```ts 55import { componentUtils } from '@kit.ArkUI'; 56let modePosition:componentUtils.ComponentInfo = componentUtils.getRectangleById("onClick"); 57``` 58 59## ComponentInfo 60 61**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 62 63**系统能力：** SystemCapability.ArkUI.ArkUI.Full 64 65| 名称 | 类型 | 必填 | 说明 | 66| ---------------|------------ | -----------------------------| -----------------------------| 67| size | [Size](#size) | 是 | 组件大小。 | 68| localOffset | [Offset](#offset) | 是 | 组件相对于父组件信息。 | 69| windowOffset | [Offset](#offset) | 是 | 组件相对于窗口信息。 | 70| screenOffset | [Offset](#offset) | 是 | 组件相对于屏幕信息。 | 71| translate | [TranslateResult](#translateresult) | 是 | 组件平移信息。 | 72| scale | [ScaleResult](#scaleresult) | 是 | 组件缩放信息。 | 73| rotate | [RotateResult](#rotateresult) | 是 | 组件旋转信息。 | 74| transform | [Matrix4Result](#matrix4result) | 是 | 仿射矩阵信息，根据入参创建的四阶矩阵对象。 | 75 76### Size 77 78**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 79 80**系统能力：** SystemCapability.ArkUI.ArkUI.Full 81 82| 名称 | 类型 | 必填 | 说明 | 83| -------- | ---- | ----------------------------------| ----------------------------------| 84| width | number | 是 | 组件宽度。<br />单位: px | 85| height | number | 是 | 组件高度。<br />单位: px | 86 87### Offset 88 89**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 90 91**系统能力：** SystemCapability.ArkUI.ArkUI.Full 92 93| 名称 | 类型 | 必填 | 说明 | 94| --------| ---- | -----------------------------------| -----------------------------------| 95| x | number | 是 | x点坐标。<br />单位: px | 96| y | number | 是 | y点坐标。<br />单位: px | 97 98### TranslateResult 99 100**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 101 102**系统能力：** SystemCapability.ArkUI.ArkUI.Full 103 104| 名称 | 类型 | 必填 | 说明 | 105| --------| ---- | -----------------------------------| -----------------------------------| 106| x | number | 是 | x轴平移距离。<br />单位: px | 107| y | number | 是 | y轴平移距离。<br />单位: px | 108| z | number | 是 | z轴平移距离。<br />单位: px | 109 110### ScaleResult 111 112**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 113 114**系统能力：** SystemCapability.ArkUI.ArkUI.Full 115 116| 名称 | 类型 | 必填 | 说明 | 117| --------| ---- | -----------------------------------| -----------------------------------| 118| x | number | 是 | x轴缩放倍数。<br />单位: px | 119| y | number | 是 | y轴缩放倍数。<br />单位: px | 120| z | number | 是 | z轴缩放倍数。<br />单位: px | 121| centerX | number | 是 | 变换中心点x轴坐标。<br />单位: px | 122| centerY | number | 是 | 变换中心点y轴坐标。<br />单位: px | 123 124### RotateResult 125 126**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 127 128**系统能力：** SystemCapability.ArkUI.ArkUI.Full 129 130| 名称 | 类型 | 必填 | 说明 | 131| --------| ---- | -----------------------------------| -----------------------------------| 132| x | number | 是 | 旋转轴向量x坐标。<br />单位: px | 133| y | number | 是 | 旋转轴向量y坐标。<br />单位: px | 134| z | number | 是 | 旋转轴向量z坐标。<br />单位: px | 135| angle | number | 是 | 旋转角度。<br />单位: px | 136| centerX | number | 是 | 变换中心点x轴坐标。<br />单位: px | 137| centerY | number | 是 | 变换中心点y轴坐标。<br />单位: px | 138 139### Matrix4Result 140 141type Matrix4Result = [number,number,number,number,number,number,number,number,number,number,number,number,number,number,number,number] 142 143**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 144 145**系统能力：** SystemCapability.ArkUI.ArkUI.Full 146 147| 类型 | 说明 | 148| --------| -----------------------------------| 149| [number,number,number,number,<br />number,number,number,number,<br />number,number,number,number,<br />number,number,number,number] | 取值范围为长度为16（4\*4）的number数组， 详情见四阶矩阵说明。<br/>单位: px | 150 151**四阶矩阵说明：** 152 153| 参数名 | 类型 | 必填 | 说明 | 154| ------ | ------ | ---- | ------------------------------------ | 155| m00 | number | 是 | x轴缩放值，单位矩阵默认为1。 | 156| m01 | number | 是 | 第2个值，xyz轴旋转会影响这个值。 | 157| m02 | number | 是 | 第3个值，xyz轴旋转会影响这个值。 | 158| m03 | number | 是 | 无实际意义。 | 159| m10 | number | 是 | 第5个值，xyz轴旋转会影响这个值。 | 160| m11 | number | 是 | y轴缩放值，单位矩阵默认为1。 | 161| m12 | number | 是 | 第7个值，xyz轴旋转会影响这个值。 | 162| m13 | number | 是 | 无实际意义。 | 163| m20 | number | 是 | 第9个值，xyz轴旋转会影响这个值。 | 164| m21 | number | 是 | 第10个值，xyz轴旋转会影响这个值。 | 165| m22 | number | 是 | z轴缩放值，单位矩阵默认为1。 | 166| m23 | number | 是 | 无实际意义。 | 167| m30 | number | 是 | x轴平移值，单位px，单位矩阵默认为0。 | 168| m31 | number | 是 | y轴平移值，单位px，单位矩阵默认为0。 | 169| m32 | number | 是 | z轴平移值，单位px，单位矩阵默认为0。 | 170| m33 | number | 是 | 齐次坐标下生效，产生透视投影效果。 | 171 172**示例：** 173 174> **说明：** 175> 176> 推荐通过使用[UIContext](js-apis-arkui-UIContext.md#uicontext)中的[getComponentUtils](./js-apis-arkui-UIContext.md#getcomponentutils)方法获取当前UI上下文关联的ComponentUtils对象。 177 178 ```ts 179import { matrix4, componentUtils } from '@kit.ArkUI'; 180 181@Entry 182@Component 183struct Utils { 184 @State x: number = 120; 185 @State y: number = 10; 186 @State z: number = 100; 187 @State value: string = ''; 188 private matrix1 = matrix4.identity().translate({ x: this.x, y: this.y, z: this.z }); 189 190 build() { 191 Column() { 192 Image($r("app.media.img")) 193 .transform(this.matrix1) 194 .translate({ x: 20, y: 20, z: 20 }) 195 .scale({ x: 0.5, y: 0.5, z: 1 }) 196 .rotate({ 197 x: 1, 198 y: 1, 199 z: 1, 200 centerX: '50%', 201 centerY: '50%', 202 angle: 300 203 }) 204 .width(300) 205 .height(100) 206 .key("image_01") 207 Button('getRectangleById') 208 .onClick(() => { 209 this.value = JSON.stringify(this.getUIContext().getComponentUtils().getRectangleById("image_01")) // 建议使用this.getUIContext().getComponentUtils()接口 210 }).margin(10).id('onClick') 211 Text(this.value) 212 .margin(20) 213 .width(300) 214 .height(300) 215 .borderWidth(2) 216 }.margin({left: 50}) 217 } 218} 219 ``` 220 221 
