形状裁剪

形状裁剪简易使用

形状裁剪功能在 HarmonyOS 开发中用于对组件进行裁剪和遮罩处理,以下是其简易使用方法。

官网文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-sharp-clipping-V5#mask12

  1. 裁剪功能
    • clip属性(API Version 7 开始支持,API Version 12 有更新):用于决定是否对当前组件的子组件进行裁剪,参数为boolean类型。例如,在一个Row组件中包含Image组件,如果希望Image组件的显示范围被Row组件的边缘轮廓限制(如Row设置了圆角效果),则可以将Rowclip属性设置为true
    • clipShape属性(API Version 12 开始支持):按指定的形状(如圆形CircleShape、椭圆形EllipseShape、路径形状PathShape、矩形RectShape)对当前组件进行裁剪。比如,要将一张图片裁剪成圆形,可以创建一个Circle对象并设置合适的宽度和高度,然后将其作为参数传递给Image组件的clipShape属性。
  2. 遮罩功能
    • mask属性(API Version 12 开始支持):为组件添加可调节进度的遮罩,参数为ProgressMask类型。通过ProgressMask可以设置遮罩的进度、最大值和颜色等属性,实现动态效果。
    • maskShape属性(API Version 12 开始支持):用于为组件添加指定形状(圆形、椭圆形、路径形状、矩形)的遮罩。可以创建相应形状的对象(如RectCircle等)并设置相关属性(如填充颜色),然后将其应用到组件的maskShape属性上。

示例代码解析

  1. 裁剪示例
    ClipAndMaskExample结构体中:
    • 首先展示了clip属性的使用,Row组件设置了clip(true)borderRadius(20),这使得其中的Image组件会被裁剪成圆角矩形,若不设置cliptrueImage组件的角会超出Row组件的圆角范围。
    • 接着通过clipShape属性,使用Circle形状对图片进行裁剪,创建了一个直径为280px的圆形裁剪区域应用到Image组件上。
  2. 遮罩示例
    ProgressMaskExample结构体中:
    • 首先创建了一个ProgressMask对象,并将其应用到Image组件的mask属性上,为图片添加了一个进度遮罩。同时设置了动画效果,包括动画时长、曲线、延迟、播放次数和模式等。
    • 然后通过按钮的点击事件来更新进度遮罩的进度值(updateProgress)、颜色(updateColor)以及控制呼吸光晕动画的开关(enableBreathingAnimation)。例如,点击updateProgress按钮会使进度值增加,从而改变遮罩的显示效果;点击updateColor按钮会切换遮罩的颜色;点击enableBreathingAnimation按钮可以开启或关闭进度满时的呼吸光晕动画。

形状裁剪功能为组件的样式处理提供了丰富的手段,可以实现各种个性化的界面效果,开发者可以根据具体需求灵活运用这些属性和方法来优化应用的用户界面。

posted @   flfljh2024  阅读(17)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!
点击右上角即可分享
微信分享提示