harmony 鸿蒙@ohos.arkui.componentUtils (componentUtils)

  • 2023-10-30
  • 浏览 (485)

@ohos.arkui.componentUtils (componentUtils)

提供获取组件绘制区域坐标和大小的能力。

说明:

从API Version 10开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

本模块功能依赖UI的执行上下文,不可在UI上下文不明确的地方使用,参见UIContext说明。

从API version 10开始,可以通过使用UIContext中的getComponentUtils方法获取当前UI上下文关联的ComponentUtils对象。该接口需要在目标组件布局、完成以后获取目标组件区域大小信息,建议在@ohos.arkui.inspector(布局回调)接收到布局完成的通知以后使用该接口。

导入模块

import componentUtils from '@ohos.arkui.componentUtils'

componentUtils.getRectangleById

getRectangleById(id: string): ComponentInfo

根据组件ID获取组件实例对象, 通过组件实例对象将获取的坐标位置和大小同步返回给开发者。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名 类型 必填 说明
id string 指定组件id。

返回值:

类型 说明
ComponentInfo 组件大小、位置、平移缩放旋转及仿射矩阵属性信息。

示例:

import componentUtils from '@ohos.arkui.componentUtils';
let modePosition:componentUtils.ComponentInfo = componentUtils.getRectangleById("onClick");

ComponentInfo

系统能力: SystemCapability.ArkUI.ArkUI.Full

名称 类型 必填 说明
size Size 组件大小。
localOffset Offset 组件相对于父组件信息。
windowOffset Offset 组件相对于窗口信息。
screenOffset Offset 组件相对于屏幕信息。
translate TranslateResult 组件平移信息。
scale ScaleResult 组件缩放信息。
rotate RotateResult 组件旋转信息。
transform Matrix4Result 仿射矩阵信息,根据入参创建的四阶矩阵对象。

Size

系统能力: SystemCapability.ArkUI.ArkUI.Full

名称 类型 必填 说明
width number 组件宽度。
单位: px
height number 组件高度。
单位: px

Offset

系统能力: SystemCapability.ArkUI.ArkUI.Full

名称 类型 必填 说明
x number x点坐标。
单位: px
y number y点坐标。
单位: px

TranslateResult

系统能力: SystemCapability.ArkUI.ArkUI.Full

名称 类型 必填 说明
x number x轴平移距离。
单位: px
y number y轴平移距离。
单位: px
z number z轴平移距离。
单位: px

ScaleResult

系统能力: SystemCapability.ArkUI.ArkUI.Full

名称 类型 必填 说明
x number x轴缩放倍数。
单位: px
y number y轴缩放倍数。
单位: px
z number z轴缩放倍数。
单位: px
centerX number 变换中心点x轴坐标。
单位: px
centerY number 变换中心点y轴坐标。
单位: px

RotateResult

系统能力: SystemCapability.ArkUI.ArkUI.Full

名称 类型 必填 说明
x number 旋转轴向量x坐标。
单位: px
y number 旋转轴向量y坐标。
单位: px
z number 旋转轴向量z坐标。
单位: px
angle number 旋转角度。
单位: px
centerX number 变换中心点x轴坐标。
单位: px
centerY number 变换中心点y轴坐标。
单位: px

Matrix4Result

系统能力: SystemCapability.ArkUI.ArkUI.Full

取值范围 说明
[number,number,number,number,
number,number,number,number,
number,number,number,number,
number,number,number,number]
取值范围为长度为16(4*4)的number数组, 详情见四阶矩阵说明,单位: px

四阶矩阵说明:

参数名 类型 必填 说明
m00 number x轴缩放值,单位矩阵默认为1。
m01 number 第2个值,xyz轴旋转会影响这个值。
m02 number 第3个值,xyz轴旋转会影响这个值。
m03 number 无实际意义。
m10 number 第5个值,xyz轴旋转会影响这个值。
m11 number y轴缩放值,单位矩阵默认为1。
m12 number 第7个值,xyz轴旋转会影响这个值。
m13 number 无实际意义。
m20 number 第9个值,xyz轴旋转会影响这个值。
m21 number 第10个值,xyz轴旋转会影响这个值。
m22 number z轴缩放值,单位矩阵默认为1。
m23 number 无实际意义。
m30 number x轴平移值,单位px,单位矩阵默认为0。
m31 number y轴平移值,单位px,单位矩阵默认为0。
m32 number z轴平移值,单位px,单位矩阵默认为0。
m33 number 齐次坐标下生效,产生透视投影效果。

示例:

import matrix4 from '@ohos.matrix4';
import componentUtils from '@ohos.arkui.componentUtils';

@Entry
@Component
struct Utils{
  private getComponentRect(key:string) {
    console.info("Mode Key: " + key);
    let modePosition = componentUtils.getRectangleById(key);

    let localOffsetWidth = modePosition.size.width;
    let localOffsetHeight = modePosition.size.height;
    let localOffsetX = modePosition.localOffset.x;
    let localOffsetY = modePosition.localOffset.y;

    let windowOffsetX = modePosition.windowOffset.x;
    let windowOffsetY = modePosition.windowOffset.y;

    let screenOffsetX = modePosition.screenOffset.x;
    let screenOffsetY = modePosition.screenOffset.y;

    let translateX = modePosition.translate.x;
    let translateY = modePosition.translate.y;
    let translateZ = modePosition.translate.z;

    let scaleX = modePosition.scale.x;
    let scaleY = modePosition.scale.y;
    let scaleZ = modePosition.scale.z;
    let scaleCenterX = modePosition.scale.centerX;
    let scaleCenterY = modePosition.scale.centerY;

    let rotateX = modePosition.rotate.x;
    let rotateY = modePosition.rotate.y;
    let rotateZ = modePosition.rotate.z;
    let rotateCenterX = modePosition.rotate.centerX;
    let rotateCenterY = modePosition.rotate.centerY;
    let rotateAngle = modePosition.rotate.angle;

    let Matrix4_1 = modePosition.transform[0];
    let Matrix4_2 = modePosition.transform[1];
    let Matrix4_3 = modePosition.transform[2];
    let Matrix4_4 = modePosition.transform[3];
    let Matrix4_5 = modePosition.transform[4];
    let Matrix4_6 = modePosition.transform[5];
    let Matrix4_7 = modePosition.transform[6];
    let Matrix4_8 = modePosition.transform[7];
    let Matrix4_9 = modePosition.transform[8];
    let Matrix4_10 = modePosition.transform[9];
    let Matrix4_11 = modePosition.transform[10];
    let Matrix4_12 = modePosition.transform[11];
    let Matrix4_13 = modePosition.transform[12];
    let Matrix4_14 = modePosition.transform[13];
    let Matrix4_15 = modePosition.transform[14];
    let Matrix4_16 = modePosition.transform[15];
    console.info("[getRectangleById] current component obj is: " + modePosition );
  }
  @State x: number = 120;
  @State y: number = 10;
  @State z: number = 100;
  private matrix1 = matrix4.identity().translate({ x: this.x, y: this.y, z: this.z });
  build() {
    Column() {
        Image($r("app.media.icon"))
          .transform(this.matrix1)
          .translate({ x: 100, y: 10, z: 50})
          .scale({ x: 2, y: 0.5, z: 1 })
          .rotate({
            x: 1,
            y: 1,
            z: 1,
            centerX: '50%',
            centerY: '50%',
            angle: 300
          })
          .width("40%")
          .height(100)
          .key("image_01")
      Button() {
        Text('getRectangleById').fontSize(40).fontWeight(FontWeight.Bold);
      }.margin({ top: 20 })
      .onClick(() => {
        this.getComponentRect("image_01");
      }).id('onClick');
    }
  }
}

你可能感兴趣的鸿蒙文章

harmony 鸿蒙接口

harmony 鸿蒙系统公共事件定义(待停用)

harmony 鸿蒙系统公共事件定义

harmony 鸿蒙开发说明

harmony 鸿蒙企业设备管理概述(仅对系统应用开放)

harmony 鸿蒙BundleStatusCallback

harmony 鸿蒙@ohos.bundle.innerBundleManager (innerBundleManager模块)

harmony 鸿蒙@ohos.distributedBundle (分布式包管理)

harmony 鸿蒙@ohos.bundle (Bundle模块)

harmony 鸿蒙@ohos.enterprise.EnterpriseAdminExtensionAbility (企业设备管理扩展能力)

0  赞