图形变换 ,鸿蒙

平移

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

属性: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
         })
  }
}
相关推荐
blackorbird32 分钟前
Edge 浏览器 IE 模式成攻击突破口:黑客借仿冒网站诱导攻击
前端·edge
爱隐身的官人1 小时前
谷歌 chrome 浏览器安装crx插件(hackbar为例)
chrome·渗透测试·hackbar
谷歌开发者1 小时前
Web 开发指向标 | Chrome 开发者工具学习资源 (一)
前端·chrome·学习
名字越长技术越强2 小时前
Chrome和IE获取本机ip地址
前端
天***88962 小时前
Chrome 安装失败且提示“无可用的更新” 或 “与服务器的连接意外终止”,Chrome 离线版下载安装教程
前端·chrome
半梦半醒*2 小时前
zabbix安装
linux·运维·前端·网络·zabbix
清羽_ls2 小时前
React Hooks 核心规则&自定义 Hooks
前端·react.js·hooks
你的人类朋友2 小时前
“签名”这个概念是非对称加密独有的吗?
前端·后端·安全
西陵2 小时前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构
本郡主是喵3 小时前
用 TypeScript 进行 Truffle 测试
学习·区块链