深圳品牌床垫_上海seo_查询网站信息_外链发布软件

1、概 述

ArkUI为组件提供了裁剪和遮罩功能，我们可以实现更多样话的UI效果。下面针对裁剪和遮罩功能做介绍。

2、裁 剪

裁剪分为两种：1、父容器对子组件进行裁剪；2、直接对组件进行裁剪。

2.1、 父容器对子容器进行裁剪

如果我们希望子组件不超出父容器，超出部分做裁剪处理，可以使用此能力，接口定义如下：

// 是否对当前组件的子组件进行裁剪。默认值falseclip(value: boolean)

一个裁剪效果如下：

代码如下（11 ~ 12行）：

// xxx.ets@Entry@Componentstruct Index {  build() {    Column({ space: 15 }) {      Text('clip').fontSize(12).width('75%').fontColor('#DCDCDC')      Row() {        Image($r('app.media.harmony_class_room')).width('500px').height('280px')      }      .clip(true) // 如这里不设置clip为true，则Row组件的圆角不会限制其中的Image组件，Image组件的四个角会超出Row      .borderRadius(20)    }    .width('100%')    .margin({ top: 15 })  }}

2.2、 直接对组件进行裁剪

如果我们有组件想直接对其进行裁剪效果处理，可以考虑使用此能力，接口定义如下：​​​​​​​

// 按指定的形状对当前组件进行裁剪。clipShape(value: CircleShape | EllipseShape | PathShape | RectShape)

当前形状支持四种，分别定义如下：​​​​​​​

struct ShapeSize {   width: number | string,  //  形状的宽度。   height: number | string, //   形状的高度。}struct CircleShape {   options: ShapeSize;}struct EllipseShape {   options: ShapeSize;}struct PathShape {   options: PathShapeOptions; // 结构定义如下}struct PathShapeOptions {   commands: string // 绘制路径的指令。}struct RectShape {    // 矩形形状参数。   options: RectShapeOptions | RoundRectShapeOptions}struct RectShapeOptions extends ShapeSize {   // 矩形形状的圆角半径。   radius: number | string | Array<number | string>}struct RoundRectShapeOptions extends ShapeSize {   radiusWidth: number | string, //  矩形形状圆角半径的宽度。   radiusHeight: number | string, //  矩形形状圆角半径的高度。}

一个裁剪效果如下：

代码如下（10行）：​​​​​​​​​​​​​​

// xxx.ets@Entry@Componentstruct Index {  build() {    Column({ space: 15 }) {      Text('clip').fontSize(12).width('75%').fontColor('#DCDCDC')      // 用一个280px直径的圆对图片进行裁剪      Image($r('app.media.harmony_class_room'))        .clipShape(new Circle({ width: '280px', height: '280px' }))        .width('500px').height('280px')    }    .width('100%')    .margin({ top: 15 })  }}

3、遮罩

遮罩主要涉及以下几个API：

3.1、 为组件添加可调节进度的遮罩

接口定义如下：​​​​​​​

 // 为组件上添加可调节进度的遮罩。ProgressMask用于设置遮罩的进度、最大值和遮罩颜色。mask(value: ProgressMask)// ProgressMask定义如下：class ProgressMask {   value: number, // 进度遮罩的当前值。   total: number, // 进度遮罩的最大值。   color: ResourceColor, // 进度遮罩的颜色。   constructor(value: number, total: number, color: ResourceColor);      // 一些更新方法   updateProgress(value: number): void;   updateColor(value: ResourceColor): void；   // 进度满时的呼吸光晕动画开关。默认关闭呼吸光晕动画。   enableBreathingAnimation(value: boolean): void;}

一个示例效果如下（请注意达到100%时的展开动画，以及重置回去时的效果）：

代码如下：​​​​​​​

import { RectShape } from '@kit.ArkUI';@Entry@Componentstruct ProgressMaskExample {  @State progressflag1: boolean = true;  @State color: Color = 0x01006CDE;  @State value: number = 10.0;  @State enableBreathingAnimation: boolean = false;  @State progress: ProgressMask = new ProgressMask(10.0, 100.0, Color.Gray);  build() {    Column({ space: 15 }) {      Text('progress mask').fontSize(12).width('75%').fontColor('#DCDCDC')      // 给图片添加了一个280px*280px的进度遮罩      Image($r('app.media.harmony_class_room'))        .width('500px')        .height('280px')        .mask(this.progress)        .animation({          duration: 1000, // 动画时长          curve: Curve.Linear, // 动画曲线          delay: 0, // 动画延迟          iterations: 1, // 播放次数          playMode: PlayMode.Normal // 动画模式        }) // 对Button组件的宽高属性进行动画配置      // 更新进度遮罩的进度值      Button('updateProgress')        .onClick(() => {          this.value += 10;          this.progress.updateProgress(this.value);        }).width(200).height(50).margin(20)      // 更新进度遮罩的颜色      Button('updateColor')        .onClick(() => {          if (this.progressflag1) {            this.progress.updateColor(Color.Red);          } else {            this.progress.updateColor(Color.Gray);          }          this.progressflag1 = !this.progressflag1        }).width(200).height(50).margin(20)      // 开关呼吸光晕动画      Button('enableBreathingAnimation:' + this.enableBreathingAnimation)        .onClick(() => {          this.enableBreathingAnimation = !this.enableBreathingAnimation          this.progress.enableBreathingAnimation(this.enableBreathingAnimation);        }).width(200).height(50).margin(20)      // 恢复进度遮罩      Button('click reset!')        .onClick((event?: ClickEvent) => {          this.value = 0;          this.progress.updateProgress(this.value);        }).width(200).height(50).margin(20)    }    .width('100%')    .margin({ top: 15 })  }}

3.2、 为组件添加指定形状的遮罩

接口定义如下：​​​​​​​

// 为组件上添加指定形状的遮罩。// 其中CircleShape | EllipseShape | PathShape | RectShape在前文中有介绍maskShape(value: CircleShape | EllipseShape | PathShape | RectShape)

一个示例效果如下：

代码如下：​​​​​​​

@Entry@Componentstruct ClipAndMaskExample {  build() {    Column({ space: 15 }) {      Text('mask').fontSize(12).width('75%').fontColor('#DCDCDC')      // 给图片添加了一个500px*280px的方形遮罩      Image($r('app.media.harmony_class_room'))        .maskShape(new Rect({ width: '500px', height: '280px' }).fill('#ff0000'))        .width('500px').height('280px')      // 给图片添加了一个500px*280px的方形遮罩      Image($r('app.media.harmony_class_room'))        .maskShape(new Rect({ width: '500px', height: '280px', radius: '60px' }).fill('#00ff00'))        .width('500px').height('280px')      // 给图片添加了一个280px*280px的圆形遮罩      Image($r('app.media.harmony_class_room'))        .maskShape(new Circle({ width: '280px', height: '280px' }).fill('#0000ff'))        .width('500px').height('280px')    }    .width('100%')    .margin({ top: 15 })  }}