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