1# 形状裁剪 2 3用于对组件进行裁剪、遮罩处理。 4 5> **说明：** 6> 7> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 属性 11 12 13| 名称 | 参数类型 | 描述 | 14| -----| ------------------------------------------ | ------------------------------------ | 15| clip | [Circle](ts-drawing-components-circle.md) \| [Ellipse](ts-drawing-components-ellipse.md) \| [Path](ts-drawing-components-path.md) \| [Rect](ts-drawing-components-rect.md) \| boolean | 参数为相应类型的组件，按指定的形状对当前组件进行裁剪；参数为boolean类型时，设置是否按照父容器边缘轮廓进行裁剪。<br>默认值：false<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 16| mask | [Circle](ts-drawing-components-circle.md) \| [Ellipse](ts-drawing-components-ellipse.md) \| [Path](ts-drawing-components-path.md) \| [Rect](ts-drawing-components-rect.md) | 在当前组件上加上指定形状的遮罩。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 17 18 19## 示例 20 21```ts 22// xxx.ets 23@Entry 24@Component 25struct ClipAndMaskExample { 26 build() { 27 Column({ space: 15 }) { 28 Text('clip').fontSize(12).width('75%').fontColor('#DCDCDC') 29 Row() { 30 Image($r('app.media.testImg')).width('500px').height('280px') 31 } 32 .clip(true) // 如这里不设置clip为true，则Row组件的圆角不会限制其中的Image组件，Image组件的四个角会超出Row 33 .borderRadius(20) 34 // 用一个280px直径的圆对图片进行裁剪 35 Image($r('app.media.testImg')) 36 .clip(new Circle({ width: '280px', height: '280px' })) 37 .width('500px').height('280px') 38 39 Text('mask').fontSize(12).width('75%').fontColor('#DCDCDC') 40 // 给图片添加了一个500px*280px的方形遮罩 41 Image($r('app.media.testImg')) 42 .mask(new Rect({ width: '500px', height: '280px' }).fill(Color.Gray)) 43 .width('500px').height('280px') 44 45 // 给图片添加了一个280px*280px的圆形遮罩 46 Image($r('app.media.testImg')) 47 .mask(new Circle({ width: '280px', height: '280px' }).fill(Color.Gray)) 48 .width('500px').height('280px') 49 } 50 .width('100%') 51 .margin({ top: 15 }) 52 } 53} 54``` 55 56
