鸿蒙HarmonyOS NEXT开发：形状裁剪（ArkTS通用属性）

形状裁剪

用于对组件进行裁剪、遮罩处理。
   阐明：
  从API Version 7开始支持。后续版本如有新增内容，则接纳上角标单独标记该内容的起始版本。
  clip12+

clip(value: boolean)
是否对当前组件进行裁剪。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填阐明valueboolean是参数为boolean类型，设置是否按照父容器边沿表面进行裁剪。
默认值：false clip(deprecated)

clip(value: boolean | CircleAttribute | EllipseAttribute | PathAttribute | RectAttribute)
按指定的形状对当前组件进行裁剪。
   阐明：
  从API version 7开始支持，从API version 12开始废弃。建议使用clip和clipShape替换。
  卡片本领： 从API version 9开始，该接口支持在ArkTS卡片中使用。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填阐明valueboolean | CircleAttribute | EllipseAttribute | PathAttribute | RectAttribute是参数为相应类型的组件，按指定的形状对当前组件进行裁剪；参数为boolean类型时，设置是否按照父容器边沿表面进行裁剪。
默认值：false clipShape12+

clipShape(value: CircleShape | EllipseShape | PathShape | RectShape)
按指定的形状对当前组件进行裁剪。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填阐明valueCircleShape | EllipseShape | PathShape | RectShape是参数为相应类型的组件，按指定的形状对当前组件进行裁剪。 mask12+

mask(value: ProgressMask)
为组件上添加指定形状的遮罩。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填阐明valueProgressMask是在当前组件上加上可动态设置进度、最大值和颜色的遮罩。 mask(deprecated)

mask(value: CircleAttribute | EllipseAttribute | PathAttribute | RectAttribute | ProgressMask)
为组件上添加指定形状的遮罩。
   阐明：
  从API version 7开始支持，从API version 12开始废弃。建议使用mask和maskShape替换。
  卡片本领： 从API version 9开始，该接口支持在ArkTS卡片中使用。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填阐明valueCircleAttribute | EllipseAttribute | PathAttribute | RectAttribute | ProgressMask10+是在当前组件上加上指定形状的遮罩。 maskShape12+

mask(value: CircleShape | EllipseShape | PathShape | RectShape)
为组件上添加指定形状的遮罩。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填阐明valueCircleShape | EllipseShape | PathShape | RectShape是在当前组件上加上指定形状的遮罩。 ProgressMask10+

ProgressMask设置遮罩的进度、最大值和遮罩颜色。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
constructor10+

constructor(value: number, total: number, color: ResourceColor)
构造ProgressMask对象。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名参数类型必填参数描述valuenumber是进度遮罩的当前值。totalnumber是进度遮罩的最大值。colorResourceColor是进度遮罩的颜色。 updateProgress10+

updateProgress(value: number): void
更新进度遮罩的进度值。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名参数类型必填参数描述valuenumber是进度遮罩的当前值。 updateColor10+

updateColor(value: ResourceColor): void
更新进度遮罩的颜色。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名参数类型必填参数描述valueResourceColor是进度遮罩的颜色。 enableBreathingAnimation12+

enableBreathingAnimation(value: boolean): void
进度满时的呼吸光晕动画开关。默认关闭呼吸光晕动画。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名参数类型必填参数描述valueboolean是设置为true则开启呼吸光晕动画。默认值：false 示例

示例1

1. // xxx.ets
2. @Entry
3. @Component
4. struct ClipAndMaskExample {
5.   build() {
6.     Column({ space: 15 }) {
7.       Text('clip').fontSize(12).width('75%').fontColor('#DCDCDC')
8.       Row() {
9.         Image($r('app.media.testImg')).width('500px').height('280px')
10.       }
11.       .clip(true) // 如这里不设置clip为true，则Row组件的圆角不会限制其中的Image组件，Image组件的四个角会超出Row
12.       .borderRadius(20)
13.       // 用一个280px直径的圆对图片进行裁剪
14.       Image($r('app.media.testImg'))
15.         .clipShape(new Circle({ width: '280px', height: '280px' }))
16.         .width('500px').height('280px')
18.       Text('mask').fontSize(12).width('75%').fontColor('#DCDCDC')
19.       // 给图片添加了一个500px*280px的方形遮罩
20.       Image($r('app.media.testImg'))
21.         .maskShape(new Rect({ width: '500px', height: '280px' }).fill(Color.Gray))
22.         .width('500px').height('280px')
24.       // 给图片添加了一个280px*280px的圆形遮罩
25.       Image($r('app.media.testImg'))
26.         .maskShape(new Circle({ width: '280px', height: '280px' }).fill(Color.Gray))
27.         .width('500px').height('280px')
28.     }
29.     .width('100%')
30.     .margin({ top: 15 })
31.   }
32. }
33. <strong>ts</strong>

复制代码

示例2

1. @Entry
2. @Component
3. struct ProgressMaskExample {
4.   @State progressflag1: boolean = true;
5.   @State color: Color = 0x01006CDE;
6.   @State value: number = 10.0;
7.   @State enableBreathingAnimation: boolean = false;
8.   @State progress: ProgressMask = new ProgressMask(10.0, 100.0, Color.Gray);
9.   build() {
10.     Column({ space: 15 }) {
11.       Text('progress mask').fontSize(12).width('75%').fontColor('#DCDCDC')
12.       // 给图片添加了一个280px*280px的进度遮罩
13.       Image($r('app.media.testImg'))
14.         .width('500px').height('280px')
15.         .mask(this.progress)
16.         .animation({
17.           duration: 2000, // 动画时长
18.           curve: Curve.Linear, // 动画曲线
19.           delay: 0, // 动画延迟
20.           iterations: 1, // 播放次数
21.           playMode: PlayMode.Normal // 动画模式
22.         }) // 对Button组件的宽高属性进行动画配置
24.       // 更新进度遮罩的进度值
25.       Button('updateProgress')
26.         .onClick((event?: ClickEvent) => {
27.           this.value += 10;
28.           this.progress.updateProgress(this.value);
29.         }).width(200).height(50).margin(20)
31.       // 更新进度遮罩的颜色
32.       Button('updateColor')
33.         .onClick((event?: ClickEvent) => {
34.           if (this.progressflag1) {
35.             this.progress.updateColor(0x9fff0000);
36.           } else {
37.             this.progress.updateColor(0x9f0000ff);
38.           }
39.           this.progressflag1 = !this.progressflag1
40.         }).width(200).height(50).margin(20)
41.       
42.       // 开关呼吸光晕动画
43.       Button('enableBreathingAnimation:' + this.enableBreathingAnimation)
44.         .onClick((event?: ClickEvent) => {
45.           this.enableBreathingAnimation = !this.enableBreathingAnimation
46.           this.progress.enableBreathingAnimation(this.enableBreathingAnimation);
47.         }).width(200).height(50).margin(20)
49.       // 恢复进度遮罩
50.       Button('click reset!')
51.         .onClick((event?: ClickEvent) => {
52.           this.value = 0;
53.           this.progress.updateProgress(this.value);
54.         }).width(200).height(50).margin(20)
55.     }
56.     .width('100%')
57.     .margin({ top: 15 })
58.   }
59. }
60. <strong>ts</strong>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。