图形变换 ,鸿蒙

平移

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

属性: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
         })
  }
}
相关推荐
~Yogi37 分钟前
今日学习:Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存
学习·spring·缓存
七灵微38 分钟前
【后端】单点登录
服务器·前端
Moonnnn.3 小时前
【单片机期末】单片机系统设计
笔记·单片机·嵌入式硬件·学习
行云流水剑5 小时前
【学习记录】使用 Kali Linux 与 Hashcat 进行 WiFi 安全分析:合法的安全测试指南
linux·学习·安全
持久的棒棒君5 小时前
npm安装electron下载太慢,导致报错
前端·electron·npm
crary,记忆7 小时前
Angular微前端架构:Module Federation + ngx-build-plus (Webpack)
前端·webpack·angular·angular.js
门前云梦7 小时前
《C语言·源初法典》---C语言基础(上)
c语言·开发语言·学习
漂流瓶jz7 小时前
让数据"流动"起来!Node.js实现流式渲染/流式传输与背后的HTTP原理
前端·javascript·node.js
SamHou07 小时前
手把手 CSS 盒子模型——从零开始的奶奶级 Web 开发教程2
前端·css·web
我不吃饼干8 小时前
从 Vue3 源码中了解你所不知道的 never
前端·typescript