• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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) | Mask of the specified shape to add to the component.<br>Since API version 9, this API is supported in ArkTS widgets.|
17
18
19## Example
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) // 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.
33      .borderRadius(20)
34      // Clip the image based on a circle with a diameter of 280 px.
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      // Add a 500 px x 280 px square mask to the image.
41      Image($r('app.media.testImg'))
42        .mask(new Rect({ width: '500px', height: '280px' }).fill(Color.Gray))
43        .width('500px').height('280px')
44
45      // Add a 280 px x 280 px circular mask to the image.
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![clipAndMask](figures/clipAndMask.PNG)
57