一、简介
可利用clipShape 接口将组件裁剪为所需的形状。调用该接口后，可以保留该形状覆盖的组件部分，同时移除组件的其余部分。裁剪形状本身是不可见的。
说明 不同的形状支持的属性范围不同，路径是一种形状，除此之外还有椭圆、矩形等形状。路径的形状不支持设置宽度和高度，具体形状支持的属性参考具体形状的文档。
形状中的fill属性对clipShape接口不生效。
二、裁剪圆形
通过设置CircleShape，将图片裁剪为圆形。 效果图
示例代码
c
import { CircleShape } from '@kit.ArkUI'
@Entry
@Component
struct TestClipShape {
@State message: string = 'Hello World';
build() {
Column({ space: 20 }) {
//原图
Image($r('app.media.mount'))
.width('100%')
// 用一个280px直径的圆对图片进行裁剪
Image($r('app.media.mount'))
.clipShape(new CircleShape({ width: '280px', height: '280px' }))
.width('500px').height('280px')
// 用一个350px直径的圆对图片进行裁剪
Image($r('app.media.mount'))
.clipShape(new CircleShape({ width: '350px', height: '350px' }))
.width('500px').height('370px')
}
.height('100%')
.width('100%')
.padding({ top: 50 })
}
}三、裁剪椭圆形
通过设置EllipseShape，将图片裁剪为椭圆形。 效果图
示例代码
c
import { CircleShape, EllipseShape } from '@kit.ArkUI'
@Entry
@Component
struct TestClipShape {
@State message: string = 'Hello World';
build() {
Scroll() {
Column({ space: 20 }) {
//原图
Image($r('app.media.mount'))
.width('100%')
Text('通过设置EllipseShape，将图片裁剪为椭圆形').fontSize(16).fontColor(Color.Black)
Row({ space: 20 }) {
// 用一个280px直径的圆对图片进行裁剪
Image($r('app.media.mount'))
.clipShape(new CircleShape({ width: '280px', height: '280px' }))
.width('500px').height('280px')
// 用一个350px直径的圆对图片进行裁剪
Image($r('app.media.mount'))
.clipShape(new CircleShape({ width: '350px', height: '350px' }))
.width('500px').height('370px')
}
Text('通过设置EllipseShape，将图片裁剪为椭圆形').fontSize(16).fontColor(Color.Black)
Row({ space: 20 }) {
Image($r('app.media.background'))
.clipShape(new EllipseShape({ width: '280px', height: '200px' }))
.width('500px').height('400px')
Image($r('app.media.background'))
.clipShape(new EllipseShape({ width: '380px', height: '280px' }))
.width('500px').height('400px')
}
}
.width('100%')
}
.height('100%')
.width('100%')
}
}四、裁剪矩形
通过设置RectShape，将图片裁剪为矩形。 效果图
示例代码
c
import { CircleShape, EllipseShape, RectShape } from '@kit.ArkUI'
@Entry
@Component
struct TestClipShape {
@State message: string = 'Hello World';
build() {
Scroll() {
Column({ space: 20 }) {
//原图
Image($r('app.media.mount'))
.width('100%')
Text('通过设置EllipseShape，将图片裁剪为椭圆形').fontSize(16).fontColor(Color.Black)
Row({ space: 20 }) {
// 用一个280px直径的圆对图片进行裁剪
Image($r('app.media.mount'))
.clipShape(new CircleShape({ width: '280px', height: '280px' }))
.width('500px').height('280px')
// 用一个350px直径的圆对图片进行裁剪
Image($r('app.media.mount'))
.clipShape(new CircleShape({ width: '350px', height: '350px' }))
.width('500px').height('370px')
}
Text('通过设置EllipseShape，将图片裁剪为椭圆形').fontSize(16).fontColor(Color.Black)
Row({ space: 20 }) {
Image($r('app.media.background'))
.clipShape(new EllipseShape({ width: '280px', height: '200px' }))
.width('500px').height('400px')
Image($r('app.media.background'))
.clipShape(new EllipseShape({ width: '380px', height: '280px' }))
.width('500px').height('400px')
}
Text('通过设置RectShape，将图片裁剪为矩形').fontSize(16).fontColor(Color.Black)
Row({ space: 20 }) {
Image($r('app.media.background'))
.clipShape(new RectShape({ width: '200px', height: '200px' }))
.width('500px').height('400px')
Image($r('app.media.background'))
.clipShape(new RectShape({ width: '380px', height: '280px' }))
.width('500px').height('400px')
}
}
.width('100%')
}
.height('100%')
.width('100%')
}
}五、裁剪不规则形状
通过设置PathShape，将图片裁剪为不规则形状。 效果图
示例代码
c
import { CircleShape, EllipseShape, PathShape, RectShape } from '@kit.ArkUI'
@Entry
@Component
struct TestClipShape {
@State message: string = 'Hello World';
build() {
Scroll() {
Column({ space: 20 }) {
//原图
Image($r('app.media.mount'))
.width('100%')
Text('通过设置EllipseShape，将图片裁剪为椭圆形').fontSize(16).fontColor(Color.Black)
Row({ space: 20 }) {
// 用一个280px直径的圆对图片进行裁剪
Image($r('app.media.mount'))
.clipShape(new CircleShape({ width: '280px', height: '280px' }))
.width('500px').height('280px')
// 用一个350px直径的圆对图片进行裁剪
Image($r('app.media.mount'))
.clipShape(new CircleShape({ width: '350px', height: '350px' }))
.width('500px').height('370px')
}
Text('通过设置EllipseShape，将图片裁剪为椭圆形').fontSize(16).fontColor(Color.Black)
Row({ space: 20 }) {
Image($r('app.media.background'))
.clipShape(new EllipseShape({ width: '280px', height: '200px' }))
.width('500px').height('400px')
Image($r('app.media.background'))
.clipShape(new EllipseShape({ width: '380px', height: '280px' }))
.width('500px').height('400px')
}
Text('通过设置RectShape，将图片裁剪为矩形').fontSize(16).fontColor(Color.Black)
Row({ space: 20 }) {
Image($r('app.media.background'))
.clipShape(new RectShape({ width: '200px', height: '200px' }))
.width('500px').height('400px')
Image($r('app.media.background'))
.clipShape(new RectShape({ width: '380px', height: '280px' }))
.width('500px').height('400px')
}
Text('通过设置PathShape，将图片裁剪为不规则形状').fontSize(16).fontColor(Color.Black)
Row() {
Image($r('app.media.background'))
.clipShape(new PathShape({ commands: 'M0 0 H400 V200 H0 Z' }))
.width('500px').height('300px')
}
.clip(true)
.borderRadius(20)
}
.width('100%')
}
.height('100%')
.width('100%')
}
}