• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Clipping Shapes (clipShape)
2
3You can use the [clipShape](../reference/apis-arkui/arkui-ts/ts-universal-attributes-sharp-clipping.md#clipshape12) API to clip components into desired shapes. After this API is called, only the portion of the component covered by the shape will remain, while the rest will be removed. The clipping shape itself is invisible.
4
5> **NOTE**
6>
7> Different shapes support different ranges of attributes. A path is one type of shape, along with others like ellipses and rectangles.
8>
9> Path shapes do not support width and height settings. For details about attributes supported by each shape, see [@ohos.arkui.shape (Shape)](../reference/apis-arkui/js-apis-arkui-shape.md).
10>
11> The [fill](../reference/apis-arkui/js-apis-arkui-shape.md#fill) attribute of shapes has no effect on the **clipShape** API.
12
13## Clipping an Image into a Circle
14
15Clip an image into a circle using **CircleShape**.
16
17```ts
18// xxx.ets
19import { CircleShape } from '@kit.ArkUI';
20
21@Entry
22@Component
23struct ClipShapeExample {
24  build() {
25    Column({ space: 15 }) {
26      // Clip the image using a circle with a diameter of 280 px.
27      Image($r('app.media.background'))
28        .clipShape(new CircleShape({ width: '280px', height: '280px' }))
29        .width('500px').height('280px')
30
31      // Clip the image using a circle with a diameter of 350 px.
32      Image($r('app.media.background'))
33        .clipShape(new CircleShape({ width: '350px', height: '350px' }))
34        .width('500px').height('370px')
35    }
36    .width('100%')
37    .margin({ top: 15 })
38  }
39}
40```
41
42![en-us_image_clip_rotundity](figures/en-us_image_clip_rotundity.png)
43
44## Clipping an Image into an Ellipse
45
46Clip an image into an ellipse using **EllipseShape**.
47
48```ts
49// xxx.ets
50import { EllipseShape } from '@kit.ArkUI';
51
52@Entry
53@Component
54struct ClipShapeExample {
55  build() {
56    Column({ space: 15 }) {
57      Image($r('app.media.background'))
58        .clipShape(new EllipseShape({ width: '280px', height: '200px' }))
59        .width('500px').height('400px')
60
61      Image($r('app.media.background'))
62        .clipShape(new EllipseShape({ width: '380px', height: '280px' }))
63        .width('500px').height('400px')
64    }
65    .width('100%')
66    .margin({ top: 15 })
67  }
68}
69```
70
71![en-us_image_clipl_elliptical](figures/en-us_image_clipl_elliptical.png)
72
73## Clipping an Image into a Rectangle
74
75Clip an image into a rectangle using **RectShape**.
76
77```ts
78// xxx.ets
79import { RectShape } from '@kit.ArkUI';
80
81@Entry
82@Component
83struct ClipShapeExample {
84  build() {
85    Column({ space: 15 }) {
86      Image($r('app.media.background'))
87        .clipShape(new RectShape({ width: '200px', height: '200px' }))
88        .width('500px').height('400px')
89
90      Image($r('app.media.background'))
91        .clipShape(new RectShape({ width: '380px', height: '280px' }))
92        .width('500px').height('400px')
93    }
94    .width('100%')
95    .margin({ top: 15 })
96  }
97}
98```
99
100![en-us_image_clipl_rectangle](figures/en-us_image_clipl_rectangle.png)
101
102## Clipping an Image into Custom Shapes
103
104Clip an image into custom shapes using **PathShape**.
105
106```ts
107// xxx.ets
108import { PathShape } from '@kit.ArkUI';
109
110@Entry
111@Component
112struct ClipShapeExample {
113  build() {
114    Column({ space: 15 }) {
115      Row() {
116        Image($r('app.media.background'))
117          .clipShape(new PathShape({ commands: 'M0 0 H400 V200 H0 Z' }))
118          .width('500px').height('300px')
119      }
120      .clip(true)
121      .borderRadius(20)
122    }
123    .width('100%')
124    .margin({ top: 15 })
125  }
126}
127```
128
129![en-us_image_clip_Irregular_shapes](figures/en-us_image_clip_Irregular_shapes.png)
130