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> 从API version 10开始，可以通过使用UIContext中的[getComponentUtils](./js-apis-arkui-UIContext.md#getcomponentutils)方法获取当前UI上下文关联的ComponentUtils对象。该接口需要在目标组件布局、完成以后获取目标组件区域大小信息，建议在[@ohos.arkui.inspector(布局回调)](js-apis-arkui-inspector.md)接收到布局完成的通知以后使用该接口。 12 13## 导入模块 14 15```ts 16import componentUtils from '@ohos.arkui.componentUtils' 17``` 18## componentUtils.getRectangleById 19 20getRectangleById(id: string): ComponentInfo 21 22根据组件ID获取组件实例对象, 通过组件实例对象将获取的坐标位置和大小同步返回给开发者。 23 24**系统能力：** SystemCapability.ArkUI.ArkUI.Full 25 26**参数：** 27 28| 参数名 | 类型 | 必填 | 说明 | 29| ------ | ------ | ---- | ---------- | 30| id | string | 是 | 指定组件id。 | 31 32**返回值：** 33 34| 类型 | 说明 | 35| ------ | ---------- | 36| [ComponentInfo](#componentinfo) | 组件大小、位置、平移缩放旋转及仿射矩阵属性信息。 | 37 38**示例：** 39 40```ts 41import componentUtils from '@ohos.arkui.componentUtils'; 42let modePosition:componentUtils.ComponentInfo = componentUtils.getRectangleById("onClick"); 43``` 44 45## ComponentInfo 46 47**系统能力：** SystemCapability.ArkUI.ArkUI.Full 48 49| 名称 | 类型 | 必填 | 说明 | 50| ---------------|------------ | -----------------------------| -----------------------------| 51| size | [Size](#size) | 是 | 组件大小。 | 52| localOffset | [Offset](#offset) | 是 | 组件相对于父组件信息。 | 53| windowOffset | [Offset](#offset) | 是 | 组件相对于窗口信息。 | 54| screenOffset | [Offset](#offset) | 是 | 组件相对于屏幕信息。 | 55| translate | [TranslateResult](#translateresult) | 是 | 组件平移信息。 | 56| scale | [ScaleResult](#scaleresult) | 是 | 组件缩放信息。 | 57| rotate | [RotateResult](#rotateresult) | 是 | 组件旋转信息。 | 58| transform | [Matrix4Result](#matrix4result) | 是 | 仿射矩阵信息，根据入参创建的四阶矩阵对象。 | 59 60### Size 61 62**系统能力：** SystemCapability.ArkUI.ArkUI.Full 63 64| 名称 | 类型 | 必填 | 说明 | 65| -------- | ---- | ----------------------------------| ----------------------------------| 66| width | number | 是 | 组件宽度。<br />单位: px | 67| height | number | 是 | 组件高度。<br />单位: px | 68 69### Offset 70 71**系统能力：** SystemCapability.ArkUI.ArkUI.Full 72 73| 名称 | 类型 | 必填 | 说明 | 74| --------| ---- | -----------------------------------| -----------------------------------| 75| x | number | 是 | x点坐标。<br />单位: px | 76| y | number | 是 | y点坐标。<br />单位: px | 77 78### TranslateResult 79 80**系统能力：** SystemCapability.ArkUI.ArkUI.Full 81 82| 名称 | 类型 | 必填 | 说明 | 83| --------| ---- | -----------------------------------| -----------------------------------| 84| x | number | 是 | x轴平移距离。<br />单位: px | 85| y | number | 是 | y轴平移距离。<br />单位: px | 86| z | number | 是 | z轴平移距离。<br />单位: px | 87 88### ScaleResult 89 90**系统能力：** SystemCapability.ArkUI.ArkUI.Full 91 92| 名称 | 类型 | 必填 | 说明 | 93| --------| ---- | -----------------------------------| -----------------------------------| 94| x | number | 是 | x轴缩放倍数。<br />单位: px | 95| y | number | 是 | y轴缩放倍数。<br />单位: px | 96| z | number | 是 | z轴缩放倍数。<br />单位: px | 97| centerX | number | 是 | 变换中心点x轴坐标。<br />单位: px | 98| centerY | number | 是 | 变换中心点y轴坐标。<br />单位: px | 99 100### RotateResult 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| angle | number | 是 | 旋转角度。<br />单位: px | 110| centerX | number | 是 | 变换中心点x轴坐标。<br />单位: px | 111| centerY | number | 是 | 变换中心点y轴坐标。<br />单位: px | 112 113### Matrix4Result 114 115**系统能力：** SystemCapability.ArkUI.ArkUI.Full 116 117| 取值范围 | 说明 | 118| --------| -----------------------------------| 119| [number,number,number,number,<br />number,number,number,number,<br />number,number,number,number,<br />number,number,number,number] | 取值范围为长度为16（4\*4）的number数组, 详情见四阶矩阵说明,单位: px | 120 121**四阶矩阵说明：** 122 123| 参数名 | 类型 | 必填 | 说明 | 124| ------ | ------ | ---- | ------------------------------------ | 125| m00 | number | 是 | x轴缩放值，单位矩阵默认为1。 | 126| m01 | number | 是 | 第2个值，xyz轴旋转会影响这个值。 | 127| m02 | number | 是 | 第3个值，xyz轴旋转会影响这个值。 | 128| m03 | number | 是 | 无实际意义。 | 129| m10 | number | 是 | 第5个值，xyz轴旋转会影响这个值。 | 130| m11 | number | 是 | y轴缩放值，单位矩阵默认为1。 | 131| m12 | number | 是 | 第7个值，xyz轴旋转会影响这个值。 | 132| m13 | number | 是 | 无实际意义。 | 133| m20 | number | 是 | 第9个值，xyz轴旋转会影响这个值。 | 134| m21 | number | 是 | 第10个值，xyz轴旋转会影响这个值。 | 135| m22 | number | 是 | z轴缩放值，单位矩阵默认为1。 | 136| m23 | number | 是 | 无实际意义。 | 137| m30 | number | 是 | x轴平移值，单位px，单位矩阵默认为0。 | 138| m31 | number | 是 | y轴平移值，单位px，单位矩阵默认为0。 | 139| m32 | number | 是 | z轴平移值，单位px，单位矩阵默认为0。 | 140| m33 | number | 是 | 齐次坐标下生效，产生透视投影效果。 | 141 142**示例：** 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.img")) 160 .transform(this.matrix1) 161 .translate({ x: 20, y: 20, z: 20 }) 162 .scale({ x: 0.5, 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(300) 172 .height(100) 173 .key("image_01") 174 Button('getRectangleById') 175 .onClick(() => { 176 this.value = JSON.stringify(componentUtils.getRectangleById("image_01")) 177 }).margin(10).id('onClick') 178 Text(this.value) 179 .margin(20) 180 .width(300) 181 .height(300) 182 .borderWidth(2) 183 }.margin({left: 50}) 184 } 185} 186 ``` 187 188 
