图像效果

2024-01-22 16:14 更新

设置组件的模糊,阴影效果以及设置图片的图像效果。

说明

从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

属性

名称

参数类型

默认值

描述

blur

number

-

为当前组件添加内容模糊效果,入参为模糊半径,模糊半径越大越模糊,为0时不模糊。

取值范围:[0, +∞)

从API version 9开始,该接口支持在ArkTS卡片中使用。

backdropBlur

number

-

为当前组件添加背景模糊效果,入参为模糊半径,模糊半径越大越模糊,为0时不模糊。

取值范围:[0, +∞)

从API version 9开始,该接口支持在ArkTS卡片中使用。

shadow

{

radius: number | Resource,

color?: Color | string | Resource,

offsetX?: number | Resource,

offsetY?: number | Resource

}

-

为当前组件添加阴影效果。

入参为模糊半径(必填)、阴影的颜色(可选,默认为灰色)、X轴的偏移量(可选,默认为0),Y轴的偏移量(可选,默认为0),偏移量单位为px。

从API version 9开始,该接口支持在ArkTS卡片中使用。

grayscale

number

0.0

为当前组件添加灰度效果。值定义为灰度转换的比例,入参1.0则完全转为灰度图像,入参则0.0图像无变化,入参在0.0和1.0之间时,效果呈线性变化。(百分比)

取值范围:[0, 1]

说明:

设置小于0的值时,按值为0处理,设置大于1的值时,按值为1处理。从API version 9开始,该接口支持在ArkTS卡片中使用。

brightness

number

1.0

为当前组件添加高光效果,入参为高光比例,值为1时没有效果,小于1时亮度变暗,0为全黑,大于1时亮度增加,数值越大亮度越大。

取值范围:[0, +∞)

说明:

设置小于0的值时,按值为0处理。从API version 9开始,该接口支持在ArkTS卡片中使用。

saturate

number

1.0

为当前组件添加饱和度效果,饱和度为颜色中的含色成分和消色成分(灰)的比例,入参为1时,显示原图像,大于1时含色成分越大,饱和度越大;小于1时消色成分越大,饱和度越小。(百分比)

从API version 9开始,该接口支持在ArkTS卡片中使用。

contrast

number

1.0

为当前组件添加对比度效果,入参为对比度的值。值为1时,显示原图,大于1时,值越大对比度越高,图像越清晰醒目,小于1时,值越小对比度越低,当对比度为0时,图像变为全灰。(百分比)

取值范围:[0, +∞)

说明:

设置小于0的值时,按值为0处理。从API version 9开始,该接口支持在ArkTS卡片中使用。

invert

number

0

反转输入的图像。入参为图像反转的比例,值为1时完全反转,值为0则图像无变化。(百分比)

取值范围:[0, 1]

说明:

设置小于0的值时,按值为0处理。从API version 9开始,该接口支持在ArkTS卡片中使用。

sepia

number

0

将图像转换为深褐色。入参为图像反转的比例。值为1则完全是深褐色的,值为0图像无变化。 (百分比)

从API version 9开始,该接口支持在ArkTS卡片中使用。

hueRotate

number | string

'0deg'

色相旋转效果,输入参数为旋转角度。

取值范围:(-∞, +∞)

说明:

色调旋转360度会显示原始颜色。先将色调旋转180 度,然后再旋转-180度会显示原始颜色。数据类型为number时,值为90和'90deg'效果一致。

从API version 9开始,该接口支持在ArkTS卡片中使用。

colorBlend 8+

Color | string | Resource

-

为当前组件添加颜色叠加效果,入参为叠加的颜色。

从API version 9开始,该接口支持在ArkTS卡片中使用。

示例

示例1

模糊属性的用法,blur内容模糊,backdropBlur背景模糊。

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct BlurEffectsExample {
  5. build() {
  6. Column({ space: 10 }) {
  7. // 对字体进行模糊
  8. Text('font blur').fontSize(15).fontColor(0xCCCCCC).width('90%')
  9. Flex({ alignItems: ItemAlign.Center }) {
  10. Text('original text').margin(10)
  11. Text('blur text')
  12. .blur(1).margin(10)
  13. Text('blur text')
  14. .blur(2).margin(10)
  15. Text('blur text')
  16. .blur(3).margin(10)
  17. }.width('90%').height(40)
  18. .backgroundColor(0xF9CF93)
  19. // 对背景进行模糊
  20. Text('backdropBlur').fontSize(15).fontColor(0xCCCCCC).width('90%')
  21. Text()
  22. .width('90%')
  23. .height(40)
  24. .fontSize(16)
  25. .backdropBlur(3)
  26. .backgroundImage('/pages/attrs/image/image.jpg')
  27. .backgroundImageSize({ width: 1200, height: 160 })
  28. }.width('100%').margin({ top: 5 })
  29. }
  30. }

示例2

设置图片的效果,包括阴影,灰度,高光,饱和度,对比度,图像反转,叠色,色相旋转等。

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct ImageEffectsExample {
  5. build() {
  6. Column({ space: 10 }) {
  7. // 添加阴影效果,图片效果不变
  8. Text('shadow').fontSize(15).fontColor(0xCCCCCC).width('90%')
  9. Image($r('app.media.image'))
  10. .width('90%')
  11. .height(40)
  12. .shadow({ radius: 10, color: Color.Green, offsetX: 20, offsetY: 30 })
  13. // 灰度效果0~1,越接近1,灰度越明显
  14. Text('grayscale').fontSize(15).fontColor(0xCCCCCC).width('90%')
  15. Image($r('app.media.image')).width('90%').height(40).grayscale(0.3)
  16. Image($r('app.media.image')).width('90%').height(40).grayscale(0.8)
  17. // 高光效果,1为正常图片,<1变暗,>1亮度增大
  18. Text('brightness').fontSize(15).fontColor(0xCCCCCC).width('90%')
  19. Image($r('app.media.image')).width('90%').height(40).brightness(1.2)
  20. // 饱和度,原图为1
  21. Text('saturate').fontSize(15).fontColor(0xCCCCCC).width('90%')
  22. Image($r('app.media.image')).width('90%').height(40).saturate(2.0)
  23. Image($r('app.media.image')).width('90%').height(40).saturate(0.7)
  24. // 对比度,1为原图,>1值越大越清晰,<1值越小越模糊
  25. Text('contrast').fontSize(15).fontColor(0xCCCCCC).width('90%')
  26. Image($r('app.media.image')).width('90%').height(40).contrast(2.0)
  27. Image($r('app.media.image')).width('90%').height(40).contrast(0.8)
  28. // 图像反转比例
  29. Text('invert').fontSize(15).fontColor(0xCCCCCC).width('90%')
  30. Image($r('app.media.image')).width('90%').height(40).invert(0.2)
  31. Image($r('app.media.image')).width('90%').height(40).invert(0.8)
  32. // 叠色添加
  33. Text('colorBlend').fontSize(15).fontColor(0xCCCCCC).width('90%')
  34. Image($r('app.media.image')).width('90%').height(40).colorBlend(Color.Green)
  35. Image($r('app.media.image')).width('90%').height(40).colorBlend(Color.Blue)
  36. // 深褐色
  37. Text('sepia').fontSize(15).fontColor(0xCCCCCC).width('90%')
  38. Image($r('app.media.image')).width('90%').height(40).sepia(0.8)
  39. // 色相旋转
  40. Text('hueRotate').fontSize(15).fontColor(0xCCCCCC).width('90%')
  41. Image($r('app.media.image')).width('90%').height(40).hueRotate(90)
  42. }.width('100%').margin({ top: 5 })
  43. }
  44. }

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号