图形变换，鸿蒙

Asia522024-03-23 16:08

平移

作用：可使组件在以组件左上角为坐标原点的坐标系中进行移动

属性：translate()

参数：{x?: X轴移动距离, y?: Y轴移动距离, z?: Z轴移动距离}

bash 复制代码

@Entry
@Component
struct Index {
  @State message: string = '点我';

  build() {
       Text()
         .width(100)
         .height(100)
         .backgroundColor('#f00')
         .translate({
           x:'100%',//向右移动自身的100% ，在这里相当于移动100
           y:'100%'
         })
  }
}

缩放

作用：分别设置X轴、Y轴、Z轴的缩放比例，默认值为1

属性：scale(),

参数： {x?: X轴缩放比例, y?: Y轴缩放比例, z?: Z轴缩放比例, centerX?: Y轴中心点坐标, centerY? Y轴中心点坐标}

bash 复制代码

@Entry
@Component
struct Index {
  @State message: string = '点我';

  build() {
       Text()
         .width(100)
         .height(100)
         .backgroundColor('#f00')
         .translate({
           x:'100%',
           y:'100%'
         })
         .scale({
           x:1.5, //相当于宽放大了1.5倍
           y:2   //比例 
         })
  }
}

旋转

作用：可使组件在以组件左上角为坐标原点的坐标系中进行旋转

属性：rotate()

参数：{angle: 旋转角度, centerX?: Y轴中心点坐标, centerY? Y轴中心点坐标}

bash 复制代码

@Entry
@Component
struct Index {
  @State message: string = '点我';

  build() {
       Text()
         .width(100)
         .height(100)
         .backgroundColor('#f00')
         .translate({
           x:'100%',
           y:'100%'
         })
         .scale({
           x:1.5, //相当于宽放大了1.5倍
           y:2   //比例
         })
         .rotate({
           angle:50, //角度
           centerX:100,
           centerY:100
         })
  }
}

图形变换 ，鸿蒙

图形变换，鸿蒙