《ArkUI实战》

# 3.7：显示效果类属性

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

# 3.7.1：高斯模糊设置

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

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

简单样例如下图所示：

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

    3_7_1_1

    # 3.7.2：背景模糊设置

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

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

    简单样例如下所示：

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

      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。

      简单样例如下所示：

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

        3_7_3_1

        # 3.7.4：灰度效果设置

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

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

        简单样例如下所示：

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

          3_7_4_1

          # 3.7.5：高光效果设置

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

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

          简单样例如下图所示：

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

            3_7_5_1

            # 3.7.6：饱和度效果设置

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

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

            简单样例如下图所示：

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

              3_7_6_1

              # 3.7.7：对比度效果设置

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

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

              简单样例如下所示：

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

                3_7_7_1

                # 3.7.8：图像反转设置

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

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

                简单样例如下所示：

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

                  3_7_8_1

                  # 3.7.9：色相旋转设置

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

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

                  简单样例如下所示：

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

                    3_7_9_1

                    # 3.7.10：深褐色效果设置

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

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

                    简单样例如下所示：

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

                      3_7_10_1

                      # 3.7.11：颜色叠加效果设置

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

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

                      简单样例如下所示：

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

                        3_7_11_1
                        (adsbygoogle = window.adsbygoogle || []).push({});
                        请作者喝杯咖啡
                        ©arkui.club版权所有，禁止私自转发、克隆网站。

                        欢迎加入鸿蒙技术交流群：695438501

                        津公网安备 12011402001367号

                        津ICP备2020008934号-2

                        中央网信办互联网违法和不良信息举报中心

                        天津市互联网违法和不良信息举报中心