《ArkUI实战》

# 3.9：形状剪切

ArkUI开发框架提供的组件继承自 CommonMethod ，因此在 CommonMethod 中的定义的属性是组件的公共属，本节笔者向读者介绍一下项目种最常用的剪切类属性，读者也可自行查看 CommonMethod 的源码了解其它剪切属性。

# 3.9.1：遮罩设置

export declare class CommonMethod<T> {
  // 添加遮罩
  mask(value: Circle | Ellipse | Path | Rect): T;
}
1
2
3
4

  • mask：给当前组件添加指定形状的遮罩，遮罩的参考系为当前组件的左上角坐标，为了使遮罩显示还必须调用 fill() 方法添加遮罩颜色。参数说明如下：

    • Circle：添加圆形遮罩，样例如下：

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

        3_3_1

      • Ellipse：添加椭圆形遮罩，样例如下：

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

          3_3_2

        • Path：在指定路径上添加遮罩， Path 使用 commands 才生效果，样例如下：

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

            3_3_3

          • Rect：添加矩形遮罩，样例如下：

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

              3_3_4

          # 3.9.2：剪切设置

          export declare class CommonMethod<T> {
  clip(value: boolean | Circle | Ellipse | Path | Rect): T;
}
          1
          2
          3

          • clip：按照指定形状对当前组件进行剪切，剪切的参考系为当前组件的左上角坐标，参数说明如下：

            • boolean：表示是否按照边缘轮廓进行裁剪，样例如下：

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

                3_3_5

                📢：ArkUI开发框架允许子组件超出父组件的绘制范围，如果不希望超出可以使用该属性做下限制，样例如下所示：

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

                  3_3_2_1

                  📢：由运行结果看，第 1 和第 3 个 Column 没有添加 clip 属性，则子组件的绘制区域可以超出父组件，第 2 个 Column 添加了 clip 并且属性值设置为true，则子组件超出父组件区域时被剪切到了。

                • Circle：把组件剪切成圆形，样例如下所示：

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

                    3_3_6

                  • Ellipse：把组件剪切成椭圆形，样例如下：

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

                      3_3_7

                    • Path：把组件按照Path剪切出对应形状，Path使用commands才生效果，样例如下：

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

                        3_3_8

                      • Rect：把组件按照指定区域剪切出对应形状，样例如下：

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

                          3_3_9
                      (adsbygoogle = window.adsbygoogle || []).push({});

                      ← 3.10：事件设置 →

                      请作者喝杯咖啡
                      ©arkui.club版权所有，禁止私自转发、克隆网站。

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

                      津公网安备 12011402001367号

                      津ICP备2020008934号-2

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

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