1# 图形变换 2 3用于对组件进行旋转、平移、缩放、矩阵变换等操作。 4 5> **说明：** 6> 7> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9## 属性 10 11 12| 名称 | 参数类型 | 描述 | 13| --------- | ---------------------------------------- | ---------------------------------------- | 14| rotate | {<br/>x?: number,<br/>y?: number,<br/>z?: number,<br/>angle: number \| string,<br/>centerX?: number \| string,<br/>centerY?: number \| string<br/>} | 可使组件在以组件左上角为坐标原点的坐标系中进行旋转（坐标系如下图所示）。其中，(x, y, z）指定一个矢量，作为旋转轴。<br>- angle：旋转角度。取值为正时相对于旋转轴方向顺时针转动，取值为负时相对于旋转轴方向逆时针转动。取值可为string类型，如'90deg'。<br>- centerX和centerY用于指定旋转的中心点。<br>旋转轴和旋转中心点都基于坐标系设定，组件发生位移时，坐标系不会随之移动。<br>默认值:<br>{<br/>x: 0,<br/>y: 0,<br/>z: 0,<br/>centerX: '50%',<br/>centerY: '50%'<br/>}<br/><br>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 15| translate | {<br/>x?: number \| string,<br/>y?: number \| string,<br/>z? : number \| string<br/>} | 可使组件在以组件左上角为坐标原点的坐标系中进行移动（坐标系如下图所示）。其中，x，y，z的值分别表示在对应轴移动的距离，值为正时表示向对应轴的正向移动，值为负时表示向对应轴的反向移动。移动距离支持数字和字符串（比如'10px'，‘10%’）两种类型。<br>默认值:<br>{<br/>x: 0,<br/>y: 0,<br/>z: 0<br/>}<br/><br>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 16| scale | {<br/>x?: number,<br/>y?: number,<br/>z?: number,<br/>centerX?: number \| string,<br/>centerY?: number \| string<br/>} | 可以分别设置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/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 17| transform | [Matrix4Transit](../apis/js-apis-matrix4.md) | 设置当前组件的变换矩阵。 | 18 19> **说明：** 20> 21> 当组件同时设置了rotate和scale属性时，centerX和centerY的取值会发生冲突，此时centerX和centerY的值以后设定属性的值为准。 22 23## 示例 24 25```ts 26// xxx.ets 27import matrix4 from '@ohos.matrix4' 28 29@Entry 30@Component 31struct TransformExample { 32 build() { 33 Column() { 34 Text('rotate').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(14) 35 Row() 36 .rotate({ 37 x: 0, 38 y: 0, 39 z: 1, 40 centerX: '50%', 41 centerY: '50%', 42 angle: 300 43 }) // 组件以矢量(0,0,1)为旋转轴，绕中心点顺时针旋转300度 44 .width(100).height(100).backgroundColor(0xAFEEEE) 45 46 Text('translate').width('90%').fontColor(0xCCCCCC).padding(10).fontSize(14) 47 Row() 48 .translate({ x: 100, y: 10 }) // x轴方向平移100，y轴方向平移10 49 .width(100).height(100).backgroundColor(0xAFEEEE).margin({ bottom: 10 }) 50 51 Text('scale').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(14) 52 Row() 53 .scale({ x: 2, y: 0.5 }) // 高度缩小一倍，宽度放大一倍，z轴在2D下无效果 54 .width(100).height(100).backgroundColor(0xAFEEEE) 55 56 Text('Matrix4').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(14) 57 Row() 58 .width(100).height(100).backgroundColor(0xAFEEEE) 59 .transform(matrix4.identity().translate({ x: 50, y: 50 }).scale({ x: 1.5, y: 1 }).rotate({ 60 x: 0, 61 y: 0, 62 z: 1, 63 angle: 60 64 })) 65 }.width('100%').margin({ top: 5 }) 66 } 67} 68``` 69 70
