图形变换 ,鸿蒙

平移

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

属性: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
         })
  }
}
相关推荐
少年阿闯~~几秒前
transition(过渡)和animation(动画)——CSS
前端·css·动画·过渡
Async Cipher2 分钟前
CSS 继承 (Inheritance)
前端·css
allanGold6 分钟前
【Chrome】chrome 调试工具的network选项卡,如何同时过滤出doc js css
chrome·调试·devtools·技巧·network选项卡
祈祷苍天赐我java之术10 分钟前
Vue 整体框架全面解析
前端·javascript·vue.js
洛小豆1 小时前
Git 打标签完全指南:从本地创建到远端推送
前端·git·github
itxh6661 小时前
Chrome浏览器 “此扩展程序不再受支持,因此已停用” 解决方案
chrome·插件·chrome浏览器
世间小小鱼1 小时前
【爬坑指南】亚马逊文件中心 AWS S3 预签名URL 前端直传
前端·云计算·aws
华仔啊1 小时前
前端登录token到底应该存在哪?LocalStorage、SessionStorage还是Cookie?一篇说透!
前端·javascript
BeefyBytes1 小时前
动态组件库建设
前端
shizidushu1 小时前
Hugging Face NLP课程学习记录 - 3. 微调一个预训练模型
人工智能·学习·自然语言处理·微调·huggingface