HarmonyOS实战开发-实现图片的水平翻转和垂直翻转

 图片水平（左右）翻转

import matrix4 from '@ohos.matrix4'

@Entry
@Component
struct FishGamePage {
private matrix1 = matrix4.identity().rotate({ x: 0, y: 1, z: 0, angle: 180 })

  @Styles transformStyle(){
    .transform(this.matrix1)
  }
  
  build() {
  	Image($r('app.media.background'))
          .width(200)
          .height(100)
          .transformStyle()
   }
}

图片垂直（上下）翻转

import matrix4 from '@ohos.matrix4'

@Entry
@Component
struct FishGamePage {
private matrix1 = matrix4.identity().rotate({ x: 1, y: 0, z: 0, angle: 180 })

  @Styles transformStyle(){
    .transform(this.matrix1)
  }
  
  build() {
  	Image($r('app.media.background'))
          .width(200)
          .height(100)
          .transformStyle()
   }
}

 

思路：

• 引入了 matrix4 模块，可能用于进行图形的变换操作。
• 定义了一个名为 FishGamePage 的组件结构体。
• 创建了一个私有属性 matrix1 ，是一个通过 matrix4.identity().rotate 方法生成的旋转矩阵。
• 定义了一个 @Styles 装饰的方法 transformStyle ，用于设置变换样式。
• 在 build 方法中使用 Image 组件，并应用了自定义的变换样式。

代码解读：

• private matrix1 = matrix4.identity().rotate({ x: 0, y: 1, z: 0, angle: 180 }) ：创建了一个绕 y 轴旋转 180 度的 4x4 变换矩阵。
• @Styles transformStyle(){...} ：定义了一个样式方法，其中包含了应用 matrix1 变换的规则。
• 在 build 方法中，通过 transformStyle() 方法为 Image 组件应用了自定义的变换样式，实现了图像的旋转效果。

注意事项：

• 确保 matrix4 模块的使用符合预期，特别是旋转参数的设置是否满足实际需求。
• 对于自定义样式方法，要注意其兼容性和在不同场景下的表现一致性。
• 图像的大小和位置可能会受到旋转变换的影响，需要根据实际效果进行调整。
• 考虑在不同设备分辨率和屏幕尺寸下，变换效果的稳定性和视觉表现。