1# 形状裁剪 2 3> **说明：** 4> 5> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 6 7 8## 权限列表 9 10无 11 12 13## 属性 14 15 16| 名称 | 参数类型 | 默认值 | 描述 | 17| -------- | -------- | -------- | -------- | 18| 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 | false | 参数为相应类型的组件，按指定的形状对当前组件进行裁剪；参数为boolean类型时，设置是否按照边缘轮廓进行裁剪。 | 19| 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) | - | 在当前组件上加上指定形状的遮罩。 | 20 21## 示例 22 23```ts 24// xxx.ets 25@Entry 26@Component 27struct ClipAndMaskExample { 28 29 build() { 30 Column({ space: 5 }) { 31 Text('clip').fontSize(9).width('90%').fontColor(0xCCCCCC) 32 // 用一个280px直径的圆对图像进行裁剪 33 Image($r('app.media.example')) 34 .clip(new Circle({ width: 80, height: 80 })) 35 .width('500px').height('280px') 36 37 Row() { 38 Image($r('app.media.example')).width('500px').height('280px') 39 } 40 .clip(true) 41 .borderRadius(20) 42 43 Text('mask').fontSize(9).width('90%').fontColor(0xCCCCCC) 44 // 给图像添加了一个500px*280px的遮罩 45 Image($r('app.media.example')) 46 .mask(new Rect({ width: '500px', height: '280px' }).fill(Color.Gray)) 47 .width('500px').height('280px') 48 49 // 给图像添加了一个280px*280px的圆遮罩 50 Image($r('app.media.example')) 51 .mask(new Circle({ width: '280px', height: '280px' }).fill(Color.Gray)) 52 .width('500px').height('281px') 53 } 54 .width('100%') 55 .margin({ top: 5 }) 56 } 57} 58``` 59 60 61
