图像效果
设置组件的模糊,阴影效果以及设置图片的图像效果。
从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+ | - | 为当前组件添加颜色叠加效果,入参为叠加的颜色。 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
示例1
模糊属性的用法,blur内容模糊,backdropBlur背景模糊。
- // xxx.ets
- @Entry
- @Component
- struct BlurEffectsExample {
- build() {
- Column({ space: 10 }) {
- // 对字体进行模糊
- Text('font blur').fontSize(15).fontColor(0xCCCCCC).width('90%')
- Flex({ alignItems: ItemAlign.Center }) {
- Text('original text').margin(10)
- Text('blur text')
- .blur(1).margin(10)
- Text('blur text')
- .blur(2).margin(10)
- Text('blur text')
- .blur(3).margin(10)
- }.width('90%').height(40)
- .backgroundColor(0xF9CF93)
- // 对背景进行模糊
- Text('backdropBlur').fontSize(15).fontColor(0xCCCCCC).width('90%')
- Text()
- .width('90%')
- .height(40)
- .fontSize(16)
- .backdropBlur(3)
- .backgroundImage('/pages/attrs/image/image.jpg')
- .backgroundImageSize({ width: 1200, height: 160 })
- }.width('100%').margin({ top: 5 })
- }
- }
示例2
设置图片的效果,包括阴影,灰度,高光,饱和度,对比度,图像反转,叠色,色相旋转等。
- // xxx.ets
- @Entry
- @Component
- struct ImageEffectsExample {
- build() {
- Column({ space: 10 }) {
- // 添加阴影效果,图片效果不变
- Text('shadow').fontSize(15).fontColor(0xCCCCCC).width('90%')
- Image($r('app.media.image'))
- .width('90%')
- .height(40)
- .shadow({ radius: 10, color: Color.Green, offsetX: 20, offsetY: 30 })
- // 灰度效果0~1,越接近1,灰度越明显
- Text('grayscale').fontSize(15).fontColor(0xCCCCCC).width('90%')
- Image($r('app.media.image')).width('90%').height(40).grayscale(0.3)
- Image($r('app.media.image')).width('90%').height(40).grayscale(0.8)
- // 高光效果,1为正常图片,<1变暗,>1亮度增大
- Text('brightness').fontSize(15).fontColor(0xCCCCCC).width('90%')
- Image($r('app.media.image')).width('90%').height(40).brightness(1.2)
- // 饱和度,原图为1
- Text('saturate').fontSize(15).fontColor(0xCCCCCC).width('90%')
- Image($r('app.media.image')).width('90%').height(40).saturate(2.0)
- Image($r('app.media.image')).width('90%').height(40).saturate(0.7)
- // 对比度,1为原图,>1值越大越清晰,<1值越小越模糊
- Text('contrast').fontSize(15).fontColor(0xCCCCCC).width('90%')
- Image($r('app.media.image')).width('90%').height(40).contrast(2.0)
- Image($r('app.media.image')).width('90%').height(40).contrast(0.8)
- // 图像反转比例
- Text('invert').fontSize(15).fontColor(0xCCCCCC).width('90%')
- Image($r('app.media.image')).width('90%').height(40).invert(0.2)
- Image($r('app.media.image')).width('90%').height(40).invert(0.8)
- // 叠色添加
- Text('colorBlend').fontSize(15).fontColor(0xCCCCCC).width('90%')
- Image($r('app.media.image')).width('90%').height(40).colorBlend(Color.Green)
- Image($r('app.media.image')).width('90%').height(40).colorBlend(Color.Blue)
- // 深褐色
- Text('sepia').fontSize(15).fontColor(0xCCCCCC).width('90%')
- Image($r('app.media.image')).width('90%').height(40).sepia(0.8)
- // 色相旋转
- Text('hueRotate').fontSize(15).fontColor(0xCCCCCC).width('90%')
- Image($r('app.media.image')).width('90%').height(40).hueRotate(90)
- }.width('100%').margin({ top: 5 })
- }
- }
更多建议: