鸿蒙UI开发——组件裁剪与遮罩

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 })  }}
相关推荐
问道飞鱼27 分钟前
【移动端知识】移动端多 WebView 互访方案:Android、iOS 与鸿蒙实现
android·ios·harmonyos·多webview互访
小梦白1 小时前
RPG59.玩家拾取物品三:可拾取物品的提示UI
ui·ue5
周胡杰2 小时前
鸿蒙加载预置数据库-关系型数据库-如何读取本地/预制数据库
数据库·华为·harmonyos·鸿蒙
脑子缺根弦3 小时前
融合优势:SIP 广播对讲联动华为会议 全场景沟通响应提速
华为·音视频·广播对讲系统
迷曳12 小时前
27、鸿蒙Harmony Next开发:ArkTS并发(Promise和async/await和多线程并发TaskPool和Worker的使用)
前端·华为·多线程·harmonyos
呆呆的小鳄鱼15 小时前
牛客:HJ24 合唱队[华为机考][最长递增子集][动态规划]
算法·华为·动态规划
迷曳16 小时前
24、鸿蒙Harmony Next开发:不依赖UI组件的全局自定义弹出框 (openCustomDialog)
dialog·前端·ui·harmonyos·鸿蒙
NoirSeeker16 小时前
在windows平台上基于OpenHarmony sdk编译三方库并暴露给ArkTS使用(详细)
c++·windows·arkts·鸿蒙·交叉编译
R-G-B18 小时前
【27】MFC入门到精通——MFC 修改用户界面登录IP IP Address Control
tcp/ip·ui·mfc·mfc 用户界面登录·mfc ip登录·mfc address登录
DC_BLOG18 小时前
OSPFv3中LSA参数
运维·服务器·华为·智能路由器·huawei