1# 形状裁剪 2 3用于对组件进行裁剪、遮罩处理。 4 5> **说明：** 6> 7> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9## clip 10 11clip(value: boolean | CircleAttribute | EllipseAttribute | PathAttribute | RectAttribute) 12 13按指定的形状对当前组件进行裁剪。 14 15**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 16 17**系统能力：** SystemCapability.ArkUI.ArkUI.Full 18 19**参数：** 20 21| 参数名 | 类型 | 必填 | 说明 | 22| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 23| value | boolean \| [CircleAttribute](ts-drawing-components-circle.md) \| [EllipseAttribute](ts-drawing-components-ellipse.md) \| [PathAttribute](ts-drawing-components-path.md) \| [RectAttribute](ts-drawing-components-rect.md) | 是 | 参数为相应类型的组件，按指定的形状对当前组件进行裁剪；参数为boolean类型时，设置是否按照父容器边缘轮廓进行裁剪。<br/>默认值：false | 24 25## mask 26 27mask(value: CircleAttribute | EllipseAttribute | PathAttribute | RectAttribute | ProgressMask) 28 29为组件上添加指定形状的遮罩。 30 31**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 32 33**系统能力：** SystemCapability.ArkUI.ArkUI.Full 34 35**参数：** 36 37| 参数名 | 类型 | 必填 | 说明 | 38| ------ | ------------------------------------------------------------ | ---- | -------------------------------- | 39| value | [ProgressMask](#progressmask10)<sup>10+</sup> \| [CircleAttribute](ts-drawing-components-circle.md) \| [EllipseAttribute](ts-drawing-components-ellipse.md) \| [PathAttribute](ts-drawing-components-path.md) \| [RectAttribute](ts-drawing-components-rect.md) | 是 | 在当前组件上加上指定形状的遮罩。 | 40 41## ProgressMask<sup>10+</sup> 42 43ProgressMask设置遮罩的进度、最大值和遮罩颜色。 44 45### constructor<sup>10+</sup> 46 47constructor(value: number, total: number, color: ResourceColor) 48 49构造ProgressMask对象。 50 51**参数：** 52 53| 参数名 | 参数类型 | 必填 | 参数描述 | 54| ------ | ------------------------------------------ | ---- | ------------------ | 55| value | number | 是 | 进度遮罩的当前值。 | 56| total | number | 是 | 进度遮罩的最大值。 | 57| color | [ResourceColor](ts-types.md#resourcecolor) | 是 | 进度遮罩的颜色。 | 58 59### updateProgress<sup>10+</sup> 60 61updateProgress(value: number): void 62 63更新进度遮罩的进度值。 64 65**参数：** 66 67| 参数名 | 参数类型 | 必填 | 参数描述 | 68| ------ | -------- | ---- | ------------------ | 69| value | number | 是 | 进度遮罩的当前值。 | 70 71### updateColor<sup>10+</sup> 72 73updateColor(value: ResourceColor): void 74 75更新进度遮罩的颜色。 76 77**参数：** 78 79| 参数名 | 参数类型 | 必填 | 参数描述 | 80| ------ | ------------------------------------------ | ---- | ---------------- | 81| value | [ResourceColor](ts-types.md#resourcecolor) | 是 | 进度遮罩的颜色。 | 82 83 84 85## 示例 86 87### 示例1 88 89```ts 90// xxx.ets 91@Entry 92@Component 93struct ClipAndMaskExample { 94 build() { 95 Column({ space: 15 }) { 96 Text('clip').fontSize(12).width('75%').fontColor('#DCDCDC') 97 Row() { 98 Image($r('app.media.testImg')).width('500px').height('280px') 99 } 100 .clip(true) // 如这里不设置clip为true，则Row组件的圆角不会限制其中的Image组件，Image组件的四个角会超出Row 101 .borderRadius(20) 102 // 用一个280px直径的圆对图片进行裁剪 103 Image($r('app.media.testImg')) 104 .clip(new Circle({ width: '280px', height: '280px' })) 105 .width('500px').height('280px') 106 107 Text('mask').fontSize(12).width('75%').fontColor('#DCDCDC') 108 // 给图片添加了一个500px*280px的方形遮罩 109 Image($r('app.media.testImg')) 110 .mask(new Rect({ width: '500px', height: '280px' }).fill(Color.Gray)) 111 .width('500px').height('280px') 112 113 // 给图片添加了一个280px*280px的圆形遮罩 114 Image($r('app.media.testImg')) 115 .mask(new Circle({ width: '280px', height: '280px' }).fill(Color.Gray)) 116 .width('500px').height('280px') 117 } 118 .width('100%') 119 .margin({ top: 15 }) 120 } 121} 122``` 123 124 125 126### 示例2 127 128```ts 129@Entry 130@Component 131struct ProgressMaskExample { 132 @State progressflag1: boolean = true; 133 @State color: Color = 0x01006CDE; 134 @State value: number = 10.0; 135 @State progress: ProgressMask = new ProgressMask(10.0, 100.0, Color.Gray); 136 build() { 137 Column({ space: 15 }) { 138 Text('progress mask').fontSize(12).width('75%').fontColor('#DCDCDC') 139 // 给图片添加了一个280px*280px的进度遮罩 140 Image($r('app.media.testImg')) 141 .width('500px').height('280px') 142 .mask(this.progress) 143 .animation({ 144 duration: 2000, // 动画时长 145 curve: Curve.Linear, // 动画曲线 146 delay: 0, // 动画延迟 147 iterations: 1, // 播放次数 148 playMode: PlayMode.Normal // 动画模式 149 }) // 对Button组件的宽高属性进行动画配置 150 151 // 更新进度遮罩的进度值 152 Button('updateProgress') 153 .onClick((event?: ClickEvent) => { 154 this.value += 10; 155 this.progress.updateProgress(this.value); 156 }).width(200).height(50).margin(20) 157 158 // 更新进度遮罩的颜色 159 Button('updateColor') 160 .onClick((event?: ClickEvent) => { 161 if (this.progressflag1) { 162 this.progress.updateColor(0x9fff0000); 163 } else { 164 this.progress.updateColor(0x9f0000ff); 165 } 166 this.progressflag1 = !this.progressflag1 167 }).width(200).height(50).margin(20) 168 169 // 恢复进度遮罩 170 Button('click reset!') 171 .onClick((event?: ClickEvent) => { 172 this.value = 0; 173 this.progress.updateProgress(this.value); 174 }).width(200).height(50).margin(20) 175 } 176 .width('100%') 177 .margin({ top: 15 }) 178 } 179} 180``` 181 182
