图形变换 ,鸿蒙

平移

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

属性: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
         })
  }
}
相关推荐
mCell4 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip4 小时前
Node.js 子进程:child_process
前端·javascript
excel7 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel8 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼9 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping9 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙10 小时前
[译] Composition in CSS
前端·css
白水清风10 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix11 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780011 小时前
new、原型和原型链浅析
前端·javascript