1# 图形变换 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @CCFFWW--> 5<!--Designer: @yangfan229--> 6<!--Tester: @lxl007--> 7<!--Adviser: @HelloCrease--> 8 9用于对组件进行旋转、平移、缩放、矩阵变换等操作。 10 11> **说明：** 12> 13> 从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14 15## rotate 16 17rotate(value: RotateOptions): T 18 19设置组件旋转。 20 21**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 22 23**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 24 25**系统能力：** SystemCapability.ArkUI.ArkUI.Full 26 27**参数：** 28 29| 参数名 | 类型 | 必填 | 说明 | 30| ------ | --------------------------------------- | ---- | ------------------------------------------------------------ | 31| value | [RotateOptions](#rotateoptions对象说明) | 是 | 可使组件在以组件左上角为坐标原点的坐标系中进行旋转（坐标系如下图所示）。其中，(x, y, z）指定一个矢量，作为旋转轴。<br/>旋转轴和旋转中心点都基于坐标系设定，组件发生位移时，坐标系不会随之移动。<br/>默认值: 在x、y、z都不指定时，x、y、z的默认值分别为0、0、1。指定了x、y、z任何一个值时，x、y、z中未指定的值默认为0。<br/>{<br/>centerX: '50%',<br/>centerY: '50%',<br/>centerZ: 0,<br/>perspective: 0<br/>}<br/>单位：vp<br/><br/>centerZ、perspective从API version 10开始支持在ArkTS卡片中使用。 | 32 33**返回值：** 34 35| 类型 | 说明 | 36| ------ | ------------------------ | 37| T | 返回当前组件。 | 38 39## rotate<sup>18+</sup> 40 41rotate(options: Optional\<RotateOptions>): T 42 43设置组件旋转。与[rotate](#rotate)相比，options参数新增了对undefined类型的支持。 44 45**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 46 47**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 48 49**系统能力：** SystemCapability.ArkUI.ArkUI.Full 50 51**参数：** 52 53| 参数名 | 类型 | 必填 | 说明 | 54| ------- | -------------------------------------------------- | ---- | ------------------------------------------------------------ | 55| options | Optional\<[RotateOptions](#rotateoptions对象说明)> | 是 | 可使组件在以组件左上角为坐标原点的坐标系中进行旋转（坐标系如下图所示）。其中，(x, y, z）指定一个矢量，作为旋转轴。<br/>旋转轴和旋转中心点都基于坐标系设定，组件发生位移时，坐标系不会随之移动。<br/>默认值: 在x、y、z都不指定时，x、y、z的默认值分别为0、0、1。指定了x、y、z任何一个值时，x、y、z中未指定的值默认为0。<br/>{<br/>centerX: '50%',<br/>centerY: '50%',<br/>centerZ: 0,<br/>perspective: 0<br/>}<br/>单位：vp<br/><br/>centerZ、perspective从API version 10开始支持在ArkTS卡片中使用。<br/>当options的值为undefined时，恢复为无旋转效果。 | 56 57**返回值：** 58 59| 类型 | 说明 | 60| ------ | ------------------------ | 61| T | 返回当前组件。 | 62 63## rotate<sup>20+</sup> 64 65rotate(options: Optional<RotateOptions | RotateAngleOptions>): T 66 67设置组件旋转效果。与[rotate](#rotate18)相比，options参数新增了对RotateAngleOptions类型的支持。 68 69**卡片能力：** 从API version 20开始，该接口支持在ArkTS卡片中使用。 70 71**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 72 73**系统能力：** SystemCapability.ArkUI.ArkUI.Full 74 75**参数：** 76 77| 参数名 | 类型 | 必填 | 说明 | 78| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 79| options | Optional\<[RotateOptions](#rotateoptions对象说明) \| [RotateAngleOptions](#rotateangleoptions20对象说明)> | 是 | RotateOptions可使组件在以组件左上角为坐标原点的坐标系中进行旋转（坐标系如下图所示）。其中，(x, y, z）指定一个矢量，作为旋转轴。<br/>旋转轴和旋转中心点都基于坐标系设定，组件发生位移时，坐标系不会随之移动。<br/>默认值：在x、y、z都不指定时，x、y、z的默认值分别为0、0、1。指定了x、y、z任何一个值时，x、y、z中未指定的值默认为0。<br/>{<br/>centerX: '50%',<br/>centerY: '50%',<br/>centerZ: 0,<br/>perspective: 0<br/>}<br/>RotateAngleOptions可使组件在以组件左上角为坐标原点的坐标系中进行旋转（坐标系如下图所示）。其中，(angleX, angleY, angleZ）指定三个轴方向上的旋转角。<br/>默认值：<br/>{<br/>angleX:0,<br />angleY:0,<br />angleZ:0,<br />centerX: '50%',<br/>centerY: '50%',<br/>centerZ: 0,<br/>perspective: 0<br/>}<br/><br/>当options的值为undefined时，恢复为无旋转效果。 | 80 81**返回值：** 82 83| 类型 | 说明 | 84| ---- | -------------- | 85| T | 返回当前组件。 | 86 87## translate 88 89translate(value: TranslateOptions): T 90 91设置组件平移。 92 93**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 94 95**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 96 97**系统能力：** SystemCapability.ArkUI.ArkUI.Full 98 99**参数：** 100 101| 参数名 | 类型 | 必填 | 说明 | 102| ------ | --------------------------------------------- | ---- | ------------------------------------------------------------ | 103| value | [TranslateOptions](#translateoptions对象说明) | 是 | 可使组件在以组件左上角为坐标原点的坐标系中进行移动（坐标系如下图所示）。其中，x，y，z的值分别表示在对应轴移动的距离，值为正时表示向对应轴的正向移动，值为负时表示向对应轴的反向移动。移动距离支持数字和字符串（比如'10px'，‘10%’）两种类型。<br/>默认值:<br/>{<br/>x: 0,<br/>y: 0,<br/>z: 0<br/>}<br/>单位：vp<br/><br/>**说明：**<br/>z轴方向移动时由于观察点位置不变，z的值接近观察点组件会有放大效果，远离则缩小。<br/> | 104 105**返回值：** 106 107| 类型 | 说明 | 108| ------ | ------------------------ | 109| T | 返回当前组件。 | 110 111## translate<sup>18+</sup> 112 113translate(translate: Optional\<TranslateOptions>): T 114 115设置组件平移。与[translate](#translate)相比，translate参数新增了对undefined类型的支持。 116 117**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 118 119**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 120 121**系统能力：** SystemCapability.ArkUI.ArkUI.Full 122 123**参数：** 124 125| 参数名 | 类型 | 必填 | 说明 | 126| --------- | -------------------------------------------------------- | ---- | ------------------------------------------------------------ | 127| translate | Optional\<[TranslateOptions](#translateoptions对象说明)> | 是 | 可使组件在以组件左上角为坐标原点的坐标系中进行移动（坐标系如下图所示）。其中，x，y，z的值分别表示在对应轴移动的距离，值为正时表示向对应轴的正向移动，值为负时表示向对应轴的反向移动。移动距离支持数字和字符串（比如'10px'，‘10%’）两种类型。<br/>默认值:<br/>{<br/>x: 0,<br/>y: 0,<br/>z: 0<br/>}<br/>单位：vp<br/><br/>**说明：**<br/>z轴方向移动时由于观察点位置不变，z的值接近观察点组件会有放大效果，远离则缩小。<br/><br/>当translate的值为undefined时，恢复为无平移效果。 | 128 129**返回值：** 130 131| 类型 | 说明 | 132| ------ | ------------------------ | 133| T | 返回当前组件。 | 134 135## scale 136 137scale(value: ScaleOptions): T 138 139设置组件缩放。 140 141**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 142 143**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 144 145**系统能力：** SystemCapability.ArkUI.ArkUI.Full 146 147**参数：** 148 149| 参数名 | 类型 | 必填 | 说明 | 150| ------ | ------------------------------------- | ---- | ------------------------------------------------------------ | 151| value | [ScaleOptions](#scaleoptions对象说明) | 是 | 可以分别设置X轴、Y轴、Z轴的缩放比例，默认值为1，同时可以通过centerX和centerY设置缩放的中心点。<br/>默认值:<br/>{<br/>x: 1,<br/>y: 1,<br/>z: 1,<br/>centerX:'50%',<br/>centerY:'50%'<br/>} | 152 153**返回值：** 154 155| 类型 | 说明 | 156| ------ | ------------------------ | 157| T | 返回当前组件。 | 158 159## scale<sup>18+</sup> 160 161scale(options: Optional\<ScaleOptions>): T 162 163设置组件缩放。与[scale](#scale)相比，options参数新增了对undefined类型的支持。 164 165**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 166 167**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 168 169**系统能力：** SystemCapability.ArkUI.ArkUI.Full 170 171**参数：** 172 173| 参数名 | 类型 | 必填 | 说明 | 174| ------- | ------------------------------------------------ | ---- | ------------------------------------------------------------ | 175| options | Optional\<[ScaleOptions](#scaleoptions对象说明)> | 是 | 可以分别设置X轴、Y轴、Z轴的缩放比例，默认值为1，同时可以通过centerX和centerY设置缩放的中心点。<br/>默认值:<br/>{<br/>x: 1,<br/>y: 1,<br/>z: 1,<br/>centerX:'50%',<br/>centerY:'50%'<br/>}<br/>当options的值为undefined时，恢复为无缩放效果。 | 176 177**返回值：** 178 179| 类型 | 说明 | 180| ------ | ------------------------ | 181| T | 返回当前组件。 | 182 183## transform 184 185transform(value: object): T 186 187可用于显示二维变换时的矩阵变换。包含三维变换时应使用[transform3D](#transform3d20)接口。 188 189**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 190 191**系统能力：** SystemCapability.ArkUI.ArkUI.Full 192 193**参数：** 194 195| 参数名 | 类型 | 必填 | 说明 | 196| ------ | ------ | ---- | ------------------------------------------------------------ | 197| value | object | 是 | 设置当前组件的变换矩阵。object当前仅支持[Matrix4Transit](../js-apis-matrix4.md)矩阵对象类型。 | 198 199**返回值：** 200 201| 类型 | 说明 | 202| ------ | ------------------------ | 203| T | 返回当前组件。 | 204 205## transform<sup>18+</sup> 206 207transform(transform: Optional\<object>): T 208 209可用于显示二维变换时的矩阵变换。包含三维变换时应使用[transform3D](#transform3d20)接口。与[transform](#transform)相比，transform<sup>18+</sup>参数新增了对undefined类型的支持。 210 211**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 212 213**系统能力：** SystemCapability.ArkUI.ArkUI.Full 214 215**参数：** 216 217| 参数名 | 类型 | 必填 | 说明 | 218| ------ | --------------------------------------- | ---- | ------------------------ | 219| transform | Optional\<object> | 是 | 设置当前组件的变换矩阵。object当前仅支持[Matrix4Transit](../js-apis-matrix4.md)矩阵对象类型。<br/>当transform的值为undefined时，恢复为单位矩阵的效果。 | 220 221**返回值：** 222 223| 类型 | 说明 | 224| ------ | ------------------------ | 225| T | 返回当前组件。 | 226 227## transform3D<sup>20+</sup> 228 229transform3D(transform: Optional\<Matrix4Transit>): T 230 231设置组件的三维变换矩阵。当涉及包含透视效果的三维变换时，transform接口显示效果可能有误，推荐使用transform3D接口。 232 233**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 234 235**系统能力：** SystemCapability.ArkUI.ArkUI.Full 236 237**参数：** 238 239| 参数名 | 类型 | 必填 | 说明 | 240| --------- | -------------------------------------------------- | ---- | ------------------------------------------------------------ | 241| transform | Optional\<[Matrix4Transit](#matrix4transit20)> | 是 | 三维变换矩阵。<br/>当transform的值为undefined时，恢复为单位矩阵的效果。 | 242 243**返回值：** 244 245| 类型 | 说明 | 246| ---- | -------------- | 247| T | 返回当前组件。 | 248 249## Matrix4Transit<sup>20+</sup> 250 251type Matrix4Transit = Matrix4Transit 252 253**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 254 255**系统能力：** SystemCapability.ArkUI.ArkUI.Full 256 257| 类型 | 说明 | 258| --------------------------------- | -------------- | 259| [Matrix4Transit](../js-apis-matrix4.md#matrix4transit) | 单位矩阵对象。 | 260 261## RotateOptions对象说明 262 263**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 264 265**系统能力：** SystemCapability.ArkUI.ArkUI.Full 266 267| 名称 | 类型 | 只读 | 可选 | 说明 | 268| ------------------------- | -------------------------- | ---- | ---- | ------------------------------------------------------------ | 269| x | number | 否 | 是 | 旋转轴向量x坐标。<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。| 270| y | number | 否 | 是 | 旋转轴向量y坐标。<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。| 271| z | number | 否 | 是 | 旋转轴向量z坐标。<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。| 272| angle | number \| string | 否 | 否 | 旋转角度。取值为正时相对于旋转轴方向顺时针转动，取值为负时相对于旋转轴方向逆时针转动。取值可为string类型，如'90deg'。<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 | 273| centerX | number \| string | 否 | 是 | 变换中心点x轴坐标。表示组件变换中心点（即锚点）的x方向坐标。取值可为string类型，如'50'，'50%'。<br/>单位：vp<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 | 274| centerY | number \| string | 否 | 是 | 变换中心点y轴坐标。表示组件变换中心点（即锚点）的y方向坐标。取值可为string类型，如'50'，'50%'。<br/>单位：vp<br/>**卡片能力：** 从API version 10开始，该接口支持在ArkTS卡片中使用。 | 275| centerZ<sup>10+</sup> | number | 否 | 是 | z轴锚点，即3D旋转中心点的z轴分量。<br/>默认值：0<br/>**卡片能力：** 从API version 10开始，该接口支持在ArkTS卡片中使用。 | 276| perspective<sup>10+</sup> | number | 否 | 是 | 视距，即视点到z=0平面的距离。<br/>旋转轴和旋转中心点都基于坐标系设定，组件发生位移时，坐标系不会随之移动。<br/>默认值：0<br/>**卡片能力：** 从API version 10开始，该接口支持在ArkTS卡片中使用。 | 277 278## RotateAngleOptions<sup>20+</sup>对象说明 279指定各轴旋转角的旋转参数选项。 280 281**卡片能力：** 从API version 20开始，该接口支持在ArkTS卡片中使用。 282 283**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 284 285**系统能力：** SystemCapability.ArkUI.ArkUI.Full 286 287| 名称 | 类型 | 只读 | 可选 | 说明 | 288| ------------------------- | -------------------------- | ---- | ---- | ------------------------------------------------------------ | 289| angleX | number \| string | 否 | 是 | X轴方向上的旋转角。取值为正时相对于旋转轴方向顺时针转动，取值为负时逆时针转动。取值可为string类型，如'90deg'。<br/>默认值：0<br/>取值范围：(-∞, +∞) | 290| angleY | number \| string | 否 | 是 | Y轴方向上的旋转角。取值为正时相对于旋转轴方向顺时针转动，取值为负时逆时针转动。取值可为string类型，如'90deg'。<br/>默认值：0<br/>取值范围：(-∞, +∞) | 291| angleZ | number \| string | 否 | 是 | Z轴方向上的旋转角。取值为正时相对于旋转轴方向顺时针转动，取值为负时逆时针转动。取值可为string类型，如'90deg'。<br/>默认值：0<br/>取值范围：(-∞, +∞) | 292| centerX | number \| string | 否 | 是 | 变换中心点x轴坐标。表示组件变换中心点（即锚点）的x方向坐标。<br/>单位：vp<br/>默认值：'50%'<br/>取值范围：(-∞, +∞) | 293| centerY | number \| string | 否 | 是 | 变换中心点y轴坐标。表示组件变换中心点（即锚点）的y方向坐标。<br/>单位：vp<br/>默认值：'50%'<br/>取值范围：(-∞, +∞) | 294| centerZ | number | 否 | 是 | z轴锚点，即3D旋转中心点的z轴分量。<br/>默认值：0<br/>取值范围：(-∞, +∞) | 295| perspective | number | 否 | 是 | 视距，即视点到z=0平面的距离。<br/>旋转轴和旋转中心点都基于坐标系设定，组件发生位移时，坐标系不会随之移动。<br/>默认值：0<br/>取值范围：(-∞, +∞) | 296 297## TranslateOptions对象说明 298 299**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 300 301**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 302 303**系统能力：** SystemCapability.ArkUI.ArkUI.Full 304 305| 名称 | 类型 | 只读 | 可选 | 说明 | 306| ---- | -------------------------- | ---- | ---- | --------------- | 307| x | number \| string | 否 | 是 | x轴的平移距离。<br/>类型为number时，单位为vp，取值范围为(-∞, +∞)。<br/>类型为string时，形式参考[Length](ts-types.md#length)的string类型。 | 308| y | number \| string | 否 | 是 | y轴的平移距离。<br/>类型为number时，单位为vp，取值范围为(-∞, +∞)。<br/>类型为string时，形式参考[Length](ts-types.md#length)的string类型。 | 309| z | number \| string | 否 | 是 | z轴的平移距离。<br/>类型为number时，单位为vp，取值范围为(-∞, +∞)。<br/>类型为string时，形式参考[Length](ts-types.md#length)的string类型。<br/>默认值：0.0 | 310 311## ScaleOptions对象说明 312 313**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 314 315**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 316 317**系统能力：** SystemCapability.ArkUI.ArkUI.Full 318 319| 名称 | 类型 | 只读 | 可选 | 说明 | 320| ------- | -------------------------- | ---- | ---- | ------------------------------------------------------------ | 321| x | number | 否 | 是 | x轴的缩放倍数。x>1时以x轴方向放大，0<x<1时以x轴方向缩小，x<0时沿x轴反向并缩放。 | 322| y | number | 否 | 是 | y轴的缩放倍数。y>1时以y轴方向放大，0<y<1时以y轴方向缩小，y<0时沿y轴反向并缩放。 | 323| z | number | 否 | 是 | z轴的缩放倍数。z>1时以z轴方向放大，0<z<1时以z轴方向缩小，z<0时沿z轴反向并缩放。 | 324| centerX | number \| string | 否 | 是 | 变换中心点x轴坐标。表示组件变换中心点（即锚点）的x方向坐标。取值可为string类型，如'50'，'50%'。<br/>单位：vp | 325| centerY | number \| string | 否 | 是 | 变换中心点y轴坐标。表示组件变换中心点（即锚点）的y方向坐标。取值可为string类型，如'50'，'50%'。<br/>单位：vp | 326 327> **说明：** 328> 329> 当组件同时设置了rotate和scale属性时，centerX和centerY的取值会发生冲突，此时centerX和centerY的值以最后设定的属性的值为准。 330 331## 示例 332 333### 示例1（为组件添加图形变换效果） 334 335该示例通过rotate、translate、scale、transform为组件添加旋转、平移、缩放、变换矩阵效果。 336 337```ts 338// xxx.ets 339import { matrix4 } from '@kit.ArkUI'; 340 341@Entry 342@Component 343struct TransformExample { 344 build() { 345 Column() { 346 Text('rotate').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(14) 347 Row() 348 .rotate({ 349 x: 0, 350 y: 0, 351 z: 1, 352 centerX: '50%', 353 centerY: '50%', 354 angle: 300 355 })// 组件以矢量(0,0,1)为旋转轴，绕中心点顺时针旋转300度 356 .width(100).height(100).backgroundColor(0xAFEEEE) 357 358 Text('translate').width('90%').fontColor(0xCCCCCC).padding(10).fontSize(14) 359 Row() 360 .translate({ x: 100, y: 10 })// x轴方向平移100，y轴方向平移10 361 .width(100) 362 .height(100) 363 .backgroundColor(0xAFEEEE) 364 .margin({ bottom: 10 }) 365 366 Text('scale').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(14) 367 Row() 368 .scale({ x: 2, y: 0.5 })// 高度缩小一倍，宽度放大一倍，z轴在2D下无效果 369 .width(100).height(100).backgroundColor(0xAFEEEE) 370 371 Text('Matrix4').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(14) 372 Row() 373 .width(100).height(100).backgroundColor(0xAFEEEE) 374 .transform(matrix4.identity().translate({ x: 50, y: 50 }).scale({ x: 1.5, y: 1 }).rotate({ 375 x: 0, 376 y: 0, 377 z: 1, 378 angle: 60 379 })) 380 }.width('100%').margin({ top: 5 }) 381 } 382} 383``` 384 385 386 387### 示例2（设置旋转视距） 388 389该示例通过perspective为组件添加视距效果。 390 391```ts 392// xxx.ets 393@Entry 394@Component 395struct Index { 396 @State prep: number = 10; 397 398 build() { 399 Row() { 400 Column() { 401 Stack() 402 .width(100) 403 .height(100) 404 .backgroundColor(Color.Red) 405 .rotate({ y: 1, angle: 45, perspective: this.prep }) 406 Button('change prep') 407 .margin({ top: 100 }) 408 .onClick(() => { 409 this.getUIContext()?.animateTo({ 410 duration: 2000, 411 curve: Curve.EaseIn, 412 iterations: 1, 413 playMode: PlayMode.Normal, 414 onFinish: () => { 415 console.info('play end'); 416 } 417 }, () => { 418 this.prep = 500 // 组件视距从10变换到500 419 }) 420 }) 421 } 422 .width('100%') 423 } 424 .height('100%') 425 } 426} 427``` 428 429 430 431### 示例3（按中心点旋转） 432 433该示例通过设置rotate和transform为不同的参数实现相同的旋转效果。 434 435```ts 436import { matrix4 } from '@kit.ArkUI'; 437 438@Entry 439@Component 440struct MatrixExample { 441 build() { 442 Column({ space: 100 }) { 443 Text('Hello1') 444 .textAlign(TextAlign.Center) 445 .width(100) 446 .height(60) 447 .backgroundColor(0xAFEEEE) 448 .borderWidth(1) 449 450 Text('Hello2') 451 .textAlign(TextAlign.Center) 452 .width(100) 453 .height(60) 454 .backgroundColor(0xAFEEEE) 455 .borderWidth(1) 456 .rotate({ 457 // 绕(100vp,60vp)的锚点旋转90度，rotate或scale的centerX、centerY为组件锚点 458 z: 1, 459 angle: 90, 460 centerX: 100, 461 centerY: 60 462 }) 463 464 Text('Hello3') 465 .textAlign(TextAlign.Center) 466 .width(100) 467 .height(60) 468 .backgroundColor(0xAFEEEE) 469 .borderWidth(1) 470 .transform(matrix4.identity() 471 .rotate({ 472 // 组件锚点(centerX,centerY)默认为(50%,50%)，即锚点在(50vp,30vp) 473 // transform的rotate指定(centerX,centerY)为(50vp,30vp)，相对于在组件本身锚点基础上再额外偏移(50vp,30vp) 474 // 此次变换相当于绕(100vp,60vp)旋转，和"Hello2"实现同样的旋转效果 475 z: 1, 476 angle: 90, 477 centerX: this.getUIContext().vp2px(50), 478 centerY: this.getUIContext().vp2px(30) 479 })) 480 481 Text('Hello4') 482 .textAlign(TextAlign.Center) 483 .width(100) 484 .height(60) 485 .backgroundColor(0xAFEEEE) 486 .borderWidth(1) 487 .scale({ 488 // 当设置x或y时，centerX和centerY才能生效 489 // 设置组件锚点为(100vp,60vp) 490 x: 1, 491 y: 1, 492 centerX: 100, 493 centerY: 60 494 })// transform的rotate不指定centerX、centerY，此次旋转的中心相对于组件本身锚点没有额外偏移 495 // 该组件通过scale设置的锚点，绕(100vp,60vp)进行旋转，和"Hello2"实现同样的旋转效果 496 .transform(matrix4.identity().rotate({ z: 1, angle: 90 })) 497 }.width('100%') 498 .height('100%') 499 } 500} 501``` 502 503 504 505### 示例4（通过transform3D实现图形变换） 506 507该示例通过设置transform3D实现图形变换效果。 508 509```ts 510import { matrix4 } from '@kit.ArkUI'; 511 512let matrix: matrix4.Matrix4Transit = matrix4.init([ 513 0.53033, 0, -0.53033, 0.00053033, 514 0, 0.75, 0, 0, 515 0.707107, 0, 0.707107, -0.000707107, 516 0, 0, 0, 1 517]) 518 519@Entry 520@Component 521struct Tests { 522 build() { 523 Column() { 524 Stack() { 525 Stack() 526 .width(200) 527 .height(100) 528 .backgroundColor(Color.Grey) 529 Stack() 530 .width(200) 531 .height(100) 532 .backgroundColor(Color.Blue) 533 .transform3D(matrix) 534 } 535 }.width('100%') 536 } 537} 538``` 539 540 541 542### 示例5（按各轴旋转角的方式实现旋转） 543 544该示例通过设置rotate的[RotateAngleOptions](#rotateangleoptions20对象说明)参数实现旋转效果。 545 546```ts 547// xxx.ets 548@Entry 549@Component 550struct Index { 551 552 build() { 553 Row() { 554 Column() { 555 Stack() 556 .width(100) 557 .height(100) 558 .backgroundColor(Color.Blue) 559 .rotate({ angleZ: -45 }) 560 Button('rotateAngle') 561 .width("40%") 562 .margin({ top: 100 }) 563 .rotate({ angleY: 30, centerX: '90%', perspective: 10 }) 564 Image($r("app.media.startIcon")) 565 .width(200) 566 .height(200) 567 .rotate({ angleX: 60, angleY: -125, angleZ: 75, centerX: 100, centerZ: 20}) 568 } 569 .width('100%') 570 } 571 .height('100%') 572 } 573} 574``` 575 576 577
