1# Shape Clipping 2 3Shape clipping changes the visible portion of a component through clipping or masking. 4 5> **NOTE** 6> 7> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Attributes 11 12 13| Name | Type | Description | 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 | Clip mode. If the value is a shape, the component is clipped based on the specified shape. If the value is of the Boolean type, it specifies whether to clip the component based on the edge outline of the parent container.<br>Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.| 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) | Mask of the specified shape to add to the component.<br>Since API version 9, this API is supported in ArkTS widgets.<br>Since API version 10, this API supports the **ProgressMask** parameter.| 17 18## ProgressMask<sup>10+</sup> 19 20Implements a **ProgressMask** object to set the progress, maximum value, and color of the mask. 21 22### constructor<sup>10+</sup> 23 24constructor(value: number, total: number, color: ResourceColor) 25 26Constructs a **ProgressMask** object. 27 28**Parameters** 29 30| Name| Type | Mandatory| Description | 31| ------ | ------------------------------------------ | ---- | ------------------ | 32| value | number | Yes | Current value of the progress mask.| 33| total | number | Yes | Maximum value of the progress mask.| 34| color | [ResourceColor](ts-types.md#resourcecolor) | Yes | Color of the progress mask. | 35 36### updateProgress<sup>10+</sup> 37 38updateProgress(value: number): void 39 40Updates the progress value of the progress mask. 41 42**Parameters** 43 44| Name| Type| Mandatory| Description | 45| ------ | -------- | ---- | ------------------ | 46| value | number | Yes | Current value of the progress mask.| 47 48### updateColor<sup>10+</sup> 49 50updateColor(value: ResourceColor): void 51 52Updates the color of the progress mask. 53 54**Parameters** 55 56| Name| Type | Mandatory| Description | 57| ------ | ------------------------------------------ | ---- | ---------------- | 58| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Color of the progress mask.| 59 60 61 62## Example 63 64### Example 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) // If clip is not set to true, the image is not confined by the rounded corners of the <Row> component and may extend beyond the <Row> component. 78 .borderRadius(20) 79 // Clip the image based on a circle with a diameter of 280 px. 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 // Add a 500 px x 280 px square mask to the image. 86 Image($r('app.media.testImg')) 87 .mask(new Rect({ width: '500px', height: '280px' }).fill(Color.Gray)) 88 .width('500px').height('280px') 89 90 // Add a 280 px x 280 px circular mask to the image. 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### Example 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 // Add a 280px x 280px progress mask to the image. 117 Image($r('app.media.testImg')) 118 .width('500px').height('280px') 119 .mask(this.progress) 120 .animation({ 121 duration: 2000, // Animation duration. 122 .curve(Curve.Linear) // Animation curve. 123 delay: 0, // Animation delay. 124 iterations: 1, // Number of playback times. 125 playMode: PlayMode.Normal // Animation playback mode. 126 }) // Animation configuration for the width and height attributes of the <Button> component. 127 128 // Update the progress value of the progress mask. 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 // Update the color of the progress mask. 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 // Restores the progress mask. 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 160
