鸿蒙next版开发：ArkTS组件通用属性（图像效果）-CFANZ编程社区

在HarmonyOS 5.0中，ArkTS提供了丰富的图像效果属性，使得开发者可以轻松地为应用中的图像添加各种视觉效果。这些效果包括阴影、灰度、高光、饱和度、对比度、图像反转、叠色、色相旋转等，极大地丰富了用户界面的表现力。本文将详细解读ArkTS中图像效果的通用属性，并提供示例代码进行说明。

图像效果属性

阴影效果

shadow属性用于为图像添加阴影效果。它接受一个对象，包含阴影的半径、颜色、水平偏移和垂直偏移。

Image($r('app.media.image'))
.width('90%')
.height(30)
.shadow({ radius: 10, color: Color.Green, offsetX: 20, offsetY: 20 })  // 添加阴影效果

灰度效果

grayscale属性用于设置图像的灰度效果。它接受一个数值，表示灰度的程度，取值范围为0到1，越接近1，灰度越明显。

Image($r('app.media.image'))
.width('90%')
.height(30)
.grayscale(0.8)  // 设置灰度效果

高亮效果

brightness属性用于调整图像的亮度。它接受一个数值，表示亮度的倍数，1为正常亮度，小于1变暗，大于1亮度增大。

Image($r('app.media.image'))
.width('90%')
.height(30)
.brightness(1.2)  // 提高亮度

饱和度效果

saturate属性用于调整图像的饱和度。它接受一个数值，表示饱和度的倍数，原图为1。

Image($r('app.media.image'))
.width('90%')
.height(30)
.saturate(2.0)  // 提高饱和度

对比度效果

contrast属性用于调整图像的对比度。它接受一个数值，表示对比度的倍数，1为原图，大于1值越大越清晰，小于1值越小越模糊。

Image($r('app.media.image'))
.width('90%')
.height(30)
.contrast(2.0)  // 提高对比度

反转效果

invert属性用于设置图像的反转效果。它接受一个数值，表示反转的程度，取值范围为0到1。

Image($r('app.media.image'))
.width('90%')
.height(30)
.invert(0.8)  // 设置反转效果

叠色效果

colorBlend属性用于为图像添加叠色效果。它接受一个颜色值，表示叠色的颜色。

Image($r('app.media.image'))
.width('90%')
.height(30)
.colorBlend(Color.Green)  // 添加叠色效果

深褐色效果

sepia属性用于设置图像的深褐色效果。它接受一个数值，表示深褐色的程度。

Image($r('app.media.image'))
.width('90%')
.height(30)
.sepia(0.8)  // 设置深褐色效果

色相旋转效果

hueRotate属性用于设置图像的色相旋转效果。它接受一个数值，表示色相旋转的角度。

Image($r('app.media.image'))
.width('90%')
.height(30)
.hueRotate(90)  // 设置色相旋转效果

示例代码

以下是一个ArkTS图像效果的完整示例：

@Entry
@Component
struct ImageEffectsExample {
  build() {
    Column({ space: 5 }) {
      Text('shadow').fontSize(15).fontColor(0xCCCCCC).width('90%')
      Image($r('app.media.image'))
        .width('90%')
        .height(30)
        .shadow({ radius: 10, color: Color.Green, offsetX: 20, offsetY: 20 })

      Text('grayscale').fontSize(15).fontColor(0xCCCCCC).width('90%')
      Image($r('app.media.image'))
        .width('90%')
        .height(30)
        .grayscale(0.3)

      Text('brightness').fontSize(15).fontColor(0xCCCCCC).width('90%')
      Image($r('app.media.image'))
        .width('90%')
        .height(30)
        .brightness(1.2)

      Text('saturate').fontSize(15).fontColor(0xCCCCCC).width('90%')
      Image($r('app.media.image'))
        .width('90%')
        .height(30)
        .saturate(2.0)

      Text('contrast').fontSize(15).fontColor(0xCCCCCC).width('90%')
      Image($r('app.media.image'))
        .width('90%')
        .height(30)
        .contrast(2.0)

      Text('invert').fontSize(15).fontColor(0xCCCCCC).width('90%')
      Image($r('app.media.image'))
        .width('90%')
        .height(30)
        .invert(0.2)

      Text('colorBlend').fontSize(15).fontColor(0xCCCCCC).width('90%')
      Image($r('app.media.image'))
        .width('90%')
        .height(30)
        .colorBlend(Color.Green)

      Text('sepia').fontSize(15).fontColor(0xCCCCCC).width('90%')
      Image($r('app.media.image'))
        .width('90%')
        .height(30)
        .sepia(0.8)

      Text('hueRotate').fontSize(15).fontColor(0xCCCCCC).width('90%')
      Image($r('app.media.image'))
        .width('90%')
        .height(30)
        .hueRotate(90)
    }
    .width('100%')
    .margin({ top: 5 })
  }
}

在这个示例中，我们创建了一个包含多种图像效果的列容器。通过设置不同的图像效果属性，我们可以轻松地为图像添加各种视觉效果。