• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 形状裁剪（clipShape）
2
3可利用[clipShape](../reference/apis-arkui/arkui-ts/ts-universal-attributes-sharp-clipping.md#clipshape12)接口将组件裁剪为所需的形状。调用该接口后，可以保留该形状覆盖的组件部分，同时移除组件的其余部分。裁剪形状本身是不可见的。
4
5> **说明：**
6>
7> 不同的形状支持的属性范围不同，路径是一种形状，除此之外还有椭圆、矩形等形状。
8>
9> 路径的形状不支持设置宽度和高度，具体形状支持的属性参考具体[形状](../reference/apis-arkui/js-apis-arkui-shape.md)的文档。
10>
11> 形状中的[fill](../reference/apis-arkui/js-apis-arkui-shape.md#fill)属性对clipShape接口不生效。
12
13## 裁剪圆形
14
15通过设置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      // 用一个280px直径的圆对图片进行裁剪
27      Image($r('app.media.background'))
28        .clipShape(new CircleShape({ width: '280px', height: '280px' }))
29        .width('500px').height('280px')
30
31      // 用一个350px直径的圆对图片进行裁剪
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![zh-cn_image_clip_rotundity](figures/zh-cn_image_clip_rotundity.png)
43
44## 裁剪椭圆形
45
46通过设置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![zh-cn_image_clipl_elliptical](figures/zh-cn_image_clipl_elliptical.png)
72
73## 裁剪矩形
74
75通过设置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![zh-cn_image_clipl_rectangle](figures/zh-cn_image_clipl_rectangle.png)
101
102## 裁剪不规则形状
103
104通过设置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![zh-cn_image_clip_Irregular_shapes](figures/zh-cn_image_clip_Irregular_shapes.png)
130