# 如何裁剪自定义形状

#### 问题现象

如何通过裁剪属性设计自定义形状？

#### 背景知识

clipShape按指定的形状（形状中可包含位置信息）对当前组件进行裁剪。通过PathShape类型的参数按SVG路径描述规范自定义裁剪形状。

#### 解决方案

*   **场景一**：按SVG路径裁剪。
    
    示例：裁剪圆角梯形。
    
    路径描述：从上底左侧点(150,0)开始，水平向右画到(250,0)，接着以半径20的圆弧连接到(270,20)，再直线延伸至右下角(350,180)，然后通过另一个圆弧过渡到(330,200)，再水平向左到(50,200)，接着用圆弧连接到(30,180)，然后垂直向下到(30,20)，再通过圆弧回到起点(50,0)，最后闭合路径。
    
    ```
    import { PathShape } from '@kit.ArkUI';
    
    @Entry
    @Component
    struct ServiceCardPage {
      build() {
        Column() {
          Image($r('app.media.background'))
            .width('500px')
            .height('300px')
            .clipShape(new PathShape({
              commands: 'M 150 0 H 250 A 20 20 0 0 1 270 20 L 350 180 A 20 20 0 0 1 330 200 H 50 A 20 20 0 0 1 30 180 V 20 A 20 20 0 0 1 50 0 Z'
            }));
        }
        .justifyContent(FlexAlign.Center)
        .height('100%')
        .width('100%');
      }
    }
    ```
    
*   **场景二**：利用固定图形路径配合偏移量进行裁剪。
    
    示例：将矩形裁剪出底部圆弧。
    
    构造一个宽度与图片一样，高度为图片1.5倍的RectShape，为此RectShape设置圆角，然后将此RectShape进行偏移。
    
    ```
    import { RectShape } from '@kit.ArkUI';
    
    @Entry
    @Component
    struct Index2 {
      build() {
        Column() {
          Image($r('app.media.background'))
            .width('50%')
            .objectFit(ImageFit.Fill)
            .clipShape(new RectShape({
              radiusWidth: '40%',
              radiusHeight: '10%',
              width: '100%',
              height: '150%'
            })
              .position({ y: '-50%' })
            );
        }
        .justifyContent(FlexAlign.Center)
        .width('100%')
        .height('100%');
      }
    }
    ```
    

#### 总结

对于较为简单的裁剪，可以使用固定图案进行裁剪，并通过偏移量控制具体裁剪的区域。当需要裁剪的图案较为复杂时，可以通过SVG规范描述裁剪路径。需要注意的是：圆角为边框属性，当对组件进行裁剪后，圆角也会被裁剪，而非给裁剪后的组件添加圆角效果。如果需要给裁剪后的组件添加圆角，需要在裁剪路径中绘制圆弧来实现圆角效果。