# 3.7:显示效果类属性

ArkUI 开发框架提供的基础组件直接或者间接的继承自 CommonMethodCommonMethod 中定义的属性样式属于公共样式,本节笔者给大家介绍一下项目种最常用的显示效果类属性,读者也可自行查看 CommonMethod 的源码了解其它属性的用法。

# 3.7.1:高斯模糊设置

export declare class CommonMethod<T> {
  blur(value: number): T;
}
1
2
3

为当前组件添加内容模糊效果,参数表示模糊半径,模糊半径越大越模糊,为 0 时不模糊,默认值为 0

简单样例如下图所示:

Image($r("app.media.src_01"))
  .width("100%")
  .height(150)

Image($r("app.media.src_01"))
  .width("100%")
  .height(150)
  .blur(5.5) // 设置图片模糊半径
1
2
3
4
5
6
7
8

样例运行结果如下图所示:

3_7_1_1

# 3.7.2:背景模糊设置

export declare class CommonMethod<T> {
  backdropBlur(value: number): T;
}
1
2
3

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

简单样例如下所示:

Image($r("app.media.src_01"))
  .width("100%")
  .height(150)

Text("backdropBlur")
  .width('100%')
  .height(150)
  .fontColor(Color.Red)
  .fontSize(22)
  .align(Alignment.Center)
  .backdropBlur(5.5) // 设置背景图片的模糊效果
  .backgroundImage($r("app.media.src_01"), ImageRepeat.NoRepeat)
  .backgroundImageSize({width: "100%", height: vp2px(150)})
1
2
3
4
5
6
7
8
9
10
11
12
13

样例运行结果如下图所示:

3_7_2_1

# 3.7.3:阴影效果设置

export declare class CommonMethod<T> {
  shadow(value: {
    radius: number | Resource;
    color?: Color | string | Resource;
    offsetX?: number | Resource;
    offsetY?: number | Resource;
  }): T;
}
1
2
3
4
5
6
7
8

为当前组件添加阴影效果,入参为模糊半径、阴影的颜色(默认为灰色)、X 轴的偏移量(默认为 0 ),Y轴的偏移量(默认为 0 ),偏移量单位为 px

简单样例如下所示:

Image($r("app.media.src_01"))
  .width("100%")
  .height(150)

Image($r("app.media.src_01"))
  .width("100%")
  .height(150)
  .shadow({
    radius: 5.5,
    color: Color.Grey,
    offsetX: vp2px(5),
    offsetY: vp2px(5)
  })
1
2
3
4
5
6
7
8
9
10
11
12
13

样例运行结果如下图所示:

3_7_3_1

# 3.7.4:灰度效果设置

export declare class CommonMethod<T> {
  grayscale(value: number): T;
}
1
2
3

为当前组件添加灰度效果,取值范围为 [0, 1],取值为 1 时把图像转换成灰度图像,取值为 0 时无变化,默认值为 0

简单样例如下所示:

Image($r("app.media.src_01"))
  .width("100%")
  .height(150)

Image($r("app.media.src_01"))
  .width("100%")
  .height(150)
  .grayscale(1) // 设置灰度值为1
1
2
3
4
5
6
7
8

样例运行结果如下图所示:

3_7_4_1

# 3.7.5:高光效果设置

export declare class CommonMethod<T> {
  brightness(value: number): T;
}
1
2
3

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

简单样例如下图所示:

Image($r("app.media.src_01"))
  .width("100%")
  .height(150)

Image($r("app.media.src_01"))
  .width("100%")
  .height(150)
  .brightness(0.5)
1
2
3
4
5
6
7
8

样例运行解脱如下图所示:

3_7_5_1

# 3.7.6:饱和度效果设置

export declare class CommonMethod<T> {
  saturate(value: number): T;
}
1
2
3

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

简单样例如下图所示:

Image($r("app.media.src_01"))
  .width("100%")
  .height(150)

Image($r("app.media.src_01"))
  .width("100%")
  .height(150)
  .saturate(2.5)

Image($r("app.media.src_01"))
  .width("100%")
  .height(150)
  .saturate(0.3)
1
2
3
4
5
6
7
8
9
10
11
12
13

样例运行结果如下图所示:

3_7_6_1

# 3.7.7:对比度效果设置

export declare class CommonMethod<T> {
  contrast(value: number): T;
}
1
2
3

为当前组件添加对比度效果,值为 1 时显示原图;大于 1 时值越大对比度越高,图像越清晰醒目;小于 1 时,值越小对比度越低;当对比度为 0 时,图像变为全灰,默认值为 1

简单样例如下所示:

Image($r("app.media.src_01"))
  .width("100%")
  .height(150)

Image($r("app.media.src_01"))
  .width("100%")
  .height(150)
  .contrast(1.5)
1
2
3
4
5
6
7
8

样例运行结果如下图所示:

3_7_7_1

# 3.7.8:图像反转设置

export declare class CommonMethod<T> {
  invert(value: number): T;
}
1
2
3

反转输入的图像,入参为图像反转的比例,值为 1 时完全反转。值为 0 则图像无变化,默认值为 0

简单样例如下所示:

Image($r("app.media.src_01"))
  .width("100%")
  .height(150)

Image($r("app.media.src_01"))
  .width("100%")
  .height(150)
  .invert(1)
1
2
3
4
5
6
7
8

样例运行结果如下图所示:

3_7_8_1

# 3.7.9:色相旋转设置

export declare class CommonMethod<T> {
  hueRotate(value: number | string): T;
}
1
2
3

色相旋转效果,输入参数为旋转角度,默认值为 0 度。

简单样例如下所示:

Image($r("app.media.src_01"))
  .width("100%")
  .height(150)

Image($r("app.media.src_01"))
  .width("100%")
  .height(150)
  .hueRotate(180)
1
2
3
4
5
6
7
8

样例运行结果如下图所示:

3_7_9_1

# 3.7.10:深褐色效果设置

export declare class CommonMethod<T> {
  sepia(value: number): T;
}
1
2
3

将图像转换为深褐色,入参为图像反转的比例,值为 1 则完全是深褐色的,值为 0 图像无变化,默认值为 0

简单样例如下所示:

Image($r("app.media.src_01"))
  .width("100%")
  .height(150)

Image($r("app.media.src_01"))
  .width("100%")
  .height(150)
  .sepia(1)
1
2
3
4
5
6
7
8

样例运行结果如下图所示:

3_7_10_1

# 3.7.11:颜色叠加效果设置

export declare class CommonMethod<T> {
  colorBlend(value: Color | string | Resource): T;
}
1
2
3

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

简单样例如下所示:

Image($r("app.media.src_01"))
  .width("100%")
  .height(150)

Image($r("app.media.src_01"))
  .width("100%")
  .height(150)
  .colorBlend(Color.Blue)
1
2
3
4
5
6
7
8

样例运行结果如下图所示:

3_7_11_1
(adsbygoogle = window.adsbygoogle || []).push({});
请作者喝杯咖啡

津公网安备 12011402001367号

津ICP备2020008934号-2