图形变换 ,鸿蒙

平移

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

属性: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
         })
  }
}
相关推荐
lijun_xiao20092 分钟前
前端最新Vue2+Vue3基础入门到实战项目全套教程
前端
Larry_Yanan2 分钟前
QML学习笔记(四十二)QML的MessageDialog
c++·笔记·qt·学习·ui
90后的晨仔15 分钟前
Pinia 状态管理原理与实战全解析
前端·vue.js
杰克尼20 分钟前
JavaWeb_p165部门管理
java·开发语言·前端
90后的晨仔22 分钟前
Vue3 状态管理完全指南:从响应式 API 到 Pinia
前端·vue.js
能不能别报错31 分钟前
K8s学习笔记(十九) K8s资源限制
笔记·学习·kubernetes
90后的晨仔37 分钟前
Vue 内置组件全解析:提升开发效率的五大神器
前端·vue.js
我胡为喜呀40 分钟前
Vue3 中的 watch 和 watchEffect:如何优雅地监听数据变化
前端·javascript·vue.js
我登哥MVP1 小时前
Ajax 详解
java·前端·ajax·javaweb
十安_数学好题速析1 小时前
倍数关系:最多能选出多少个数
笔记·学习·高考