【鸿蒙next开发】ArkUI框架：ArkTS组件-形状裁剪

于 2025-05-13 14:04:37 发布
阅读量893 收藏 23
点赞数 17
分类专栏： 鸿蒙5.0开发 ArkUI框架 ArkTS组件 文章标签： harmonyos 华为 ArkTS ArkUI android 鸿蒙系统 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73088370/article/details/147922943
版权

 往期鸿蒙5.0全套实战文章必看：（文中附带鸿蒙5.0全栈学习资料）

形状裁剪

用于对组件进行裁剪、遮罩处理。

说明

从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

clip12+

clip(value: boolean)

是否对当前组件的子组件进行裁剪。

系统能力： SystemCapability.ArkUI.ArkUI.Full

卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

参数：

参数名类型必填说明
valueboolean是

参数为boolean类型，设置是否按照父容器边缘轮廓进行裁剪。

默认值：false

说明： 设置为true后，子组件超出当前组件范围外的区域将不响应绑定的手势事件。

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

说明： 参数为对应类型的组件时，裁剪不会导致被裁剪区域无法响应绑定的手势事件。参数为boolean类型时，裁剪会导致被裁剪区域无法响应绑定的手势事件。

clipShape12+

clipShape(value: CircleShape | EllipseShape | PathShape | RectShape)

按指定的形状对当前组件进行裁剪。

系统能力： SystemCapability.ArkUI.ArkUI.Full

卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

参数：

参数名类型必填说明
valueCircleShape | EllipseShape | PathShape | RectShape是

参数为相应类型的组件，按指定的形状对当前组件进行裁剪。

说明： 裁剪不会导致被裁剪区域无法响应绑定的手势事件。

mask12+

mask(value: ProgressMask)

为组件上添加可调节进度的遮罩。

系统能力： SystemCapability.ArkUI.ArkUI.Full

元服务API： 从API version 12开始，该接口支持在元服务中使用。

参数：

参数名类型必填说明
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+

maskShape(value: CircleShape | EllipseShape | PathShape | RectShape)

为组件上添加指定形状的遮罩。

系统能力： SystemCapability.ArkUI.ArkUI.Full

卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

参数：

参数名类型必填说明
valueCircleShape | EllipseShape | PathShape | RectShape是在当前组件上加上指定形状的遮罩。

ProgressMask10+

ProgressMask设置遮罩的进度、最大值和遮罩颜色。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

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

进度满时的呼吸光晕动画开关。默认关闭呼吸光晕动画。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名参数类型必填参数描述
valueboolean是设置为true则开启呼吸光晕动画。默认值：false

示例

示例1（使用不同裁剪属性）

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

      // 用一个280px直径的圆对图片进行裁剪
      Image($r('app.media.testImg'))
        .clipShape(new Circle({ width: '280px', height: '280px' }))
        .width('500px').height('280px')

      Text('mask').fontSize(12).width('75%').fontColor('#DCDCDC')
      // 给图片添加了一个500px*280px的方形遮罩
      Image($r('app.media.testImg'))
        .maskShape(new Rect({ width: '500px', height: '280px' }).fill(Color.Gray))
        .width('500px').height('280px')

      // 给图片添加了一个280px*280px的圆形遮罩
      Image($r('app.media.testImg'))
        .maskShape(new Circle({ width: '280px', height: '280px' }).fill(Color.Gray))
        .width('500px').height('280px')
    }
    .width('100%')
    .margin({ top: 15 })
  }
}

示例2（裁剪属性动画）

@Entry
@Component
struct 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.testImg'))
        .width('500px').height('280px')
        .mask(this.progress)
        .animation({
          duration: 2000, // 动画时长
          curve: Curve.Linear, // 动画曲线
          delay: 0, // 动画延迟
          iterations: 1, // 播放次数
          playMode: PlayMode.Normal // 动画模式
        }) // 对Button组件的宽高属性进行动画配置

      // 更新进度遮罩的进度值
      Button('updateProgress')
        .onClick((event?: ClickEvent) => {
          this.value += 10;
          this.progress.updateProgress(this.value);
        }).width(200).height(50).margin(20)

      // 更新进度遮罩的颜色
      Button('updateColor')
        .onClick((event?: ClickEvent) => {
          if (this.progressflag1) {
            this.progress.updateColor(0x9fff0000);
          } else {
            this.progress.updateColor(0x9f0000ff);
          }
          this.progressflag1 = !this.progressflag1
        }).width(200).height(50).margin(20)

      // 开关呼吸光晕动画
      Button('enableBreathingAnimation:' + this.enableBreathingAnimation)
        .onClick((event?: ClickEvent) => {
          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 })
  }
}

鸿蒙开发实战项目(四十七):图片编辑（ArkTS）
sybh的博客
01-28 1128
本篇Codelab主要介绍如何基于图片编解码，实现图片编辑。图片的解码。使用PixelMap进行图片编辑，如裁剪、旋转、亮度、透明度、饱和度等。图片的编码。
鸿蒙HarmonyOS NEXT开发：形状裁剪（ArkTS通用属性）
shudaoshanBBQ的博客
08-09 3056
用于对组件进行裁剪、遮罩处理。
HarmonyOS 鸿蒙Next实现图片编辑裁剪
doubletan1990的博客
09-27 2694
最近开发一款鸿蒙应用，需要用到图片裁剪，系统的图片编辑功能目前没有对外开发API调用，所以需要自己整一套裁剪的功能。由于刚接触这个ArkTS语言，探索的过程还是挺费劲。这一效果大致可以满足我的需求，但我在测试的时候发现裁剪框滑动的时候有问题，裁剪框和图片位置没做处理，有大神可以处理的可以使用这个去修改。这种方式功能比较简单，裁剪是手动点击的，大小是固定的，并不能满足我的需求。但项目部分使用的TS语言，NEXT版需要改造才能用。以我的性格就是继续探索新的方案。支持自由裁剪和固定比例裁剪。
鸿蒙NEXT开发：ArkTS组件-通用属性（形状裁剪）
最新发布
ZPYQAQ的博客
03-24 1029
用于对组件进行裁剪、遮罩处理。
java 设置截图裁剪区_鸿蒙Java开发模式11:鸿蒙图片裁剪功能的实现
weixin_34637857的博客
02-24 786
1. 鸿蒙版图片裁剪功能，效果如下:首页图片裁剪区域:裁剪结果：2.Java代码实现如下:packagecom.example.javahm9.slice;importcom.example.javahm9.ResourceTable;importcom.example.javahm9.util.CropImage;importohos.aafwk.ability.AbilitySlice...
使用HarmonyOS实现图片编辑，裁剪、旋转、亮度、透明度
2401_82546228的博客
03-28 3100
本篇Codelab是基于ArkTS的声明式开发范式的样例，主要介绍了图片编辑实现过程。样例主要包含以下功能：
鸿蒙5.0开发进阶：API ArkUI框架-ArkTS组件（形状裁剪）
Androidbye的博客
12-23 710
用于对组件进行裁剪、遮罩处理。
HarmonyOS Next开发学习手册——UI开发（ArkTS声明式开发范式）
maniuT的博客
07-09 1181
系统内置组件包括按钮、单选框、进度条、文本等。开发者可以通过链式调用的方式设置系统内置组件的渲染效果。开发者可以将系统内置组件组合为自定义组件，通过这种方式将页面组件化为一个个独立的UI单元，实现页面不同单元的独立创建、开发和复用，具有更强的工程性。
Harmony NEXT 开发-ArkUI框架速成一ArkUI概述和特点
程序员Feri
01-01 1186
自定义能力是UI开发框架提供给开发者对UI界面进行开发和定制化的能力。包括：自定义组合、自定义扩展、自定义节点和自定义渲染。可以关注我，后续这些都会一一更新，新的一年加油！
鸿蒙HarmonyOS实战开发：长列表展开收起的使用和多种ArkUI的示例集合
2401_84917132的博客
08-28 1125
本示例为ArkUI中组件、通用、动画、全局方法的集合。
OpenHarmony开发指南：ArkUI组件集合规范
DMZDAMS的博客
07-21 1258
本示例为ArkUI中组件、通用、动画、全局方法的集合。
【HarmonyOS NEXT】如何实现裁剪框固定不动，拖拽或缩放图片裁剪成适当矩形的图片裁剪功能
Mayism123的博客
06-21 672
开发中遇到选择图片上传到服务器的功能。图片可根据需要裁剪成适当的矩形，具体操作是图片从相册选择，然后拖拽、缩放图片，裁剪框固定不动。目前鸿蒙中是否有提供类似的API或者SDK可以使用？iOS demo地址：https://github.com/Vesincc/HQImageEditViewController/tree/master。裁剪框 / 固定 / 拖拽 / 缩放 / 图片裁剪。
鸿蒙媒体开发【拼图】拍照和图片
2301_76813281的博客
08-03 998
该示例通过@ohos.multimedia.image和@ohos.file.photoAccessHelper接口实现获取图片，以及图片裁剪分割的功能。
鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：形状裁剪）
m0_64420071的博客
03-02 1882
ArkTS声明式开发（通用属性：形状裁剪）
OpenHarmony开发实战：图片编辑（ArkTS）
shudaoshanQAQ的博客
04-09 1804
本篇Codelab是基于ArkTS的声明式开发范式的样例，主要介绍了图片编辑实现过程
HarmonyOS NEXT应用开发—图片压缩方案_arkts 压缩图片(1)
2401_83946570的博客
04-09 1404
转存中…(img-LXYewiQT-1712662924937)]
鸿蒙NEXT版实战开发：如何对相册图片进行编辑裁剪？
qq_39652397的博客
01-07 643
可以通过图片处理模块的pixelMap方法对图片进行编辑裁剪。
【鸿蒙NEXT】图片选择和图片压缩
my blog
04-09 998
{
HarmonyOS第三方组件——鸿蒙图片裁剪组件ohos-Image-Cropper
VincenZsw的博客
01-29 2227
前言 基于鸿蒙开源系统，完成图像裁剪组件ohos-Image-Cropper的构建，实现了和Android-Image-Cropper同样的功能，代码已经开源到（https://gitee.com/iscas-ohos/harmony-image-cropper），欢迎各位开发者下载使用并提出宝贵意见~ 背景 ohos-Image-Cropper组件是个简单、灵活、高效的图片裁剪工具，支持图片在裁剪前进行裁剪框移动、旋转、翻转（水平、垂直）的操作，并将最终裁剪结果反馈给用户。 Sample解析 在
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值