Harmony OS Next
Simplified Usage of Shape Clipping
Shape clipping functionality in HarmonyOS development is used for cropping and masking components. Below is a simplified guide to its usage.
Official documentation: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-sharp-clipping-V5#mask12
-
Clipping Functionality
-
clip
Property (Supported from API Version 7, updated in API Version 12): Determines whether to clip child components of the current component. Accepts a boolean parameter. For example, when anImage
component is inside aRow
component, settingclip(true)
on theRow
will constrain the image display within the row’s border (e.g., rounded corners set viaborderRadius
). -
clipShape
Property (Supported from API Version 12): Clips the component to a specified shape (CircleShape
,EllipseShape
,PathShape
, orRectShape
). For example, to crop an image into a circle, create aCircle
object with appropriate dimensions and apply it to theImage
component’sclipShape
property.
-
-
Masking Functionality
-
mask
Property (Supported from API Version 12): Adds a progress-based mask to the component. Accepts aProgressMask
parameter, which allows setting properties like progress value, maximum value, and color for dynamic effects. -
maskShape
Property (Supported from API Version 12): Applies a geometric mask (circle, ellipse, path, or rectangle) to the component. Create a shape object (e.g.,Rect
,Circle
) with properties like fill color, then apply it to the component’smaskShape
property.
-
Example Code Analysis
-
Clipping Example
In theClipAndMaskExample
struct:- The
clip
property is demonstrated on aRow
containing anImage
. Settingclip(true)
andborderRadius(20)
crops the image to rounded corners. Withoutclip(true)
, the image corners would extend beyond the row’s rounded border. - The
clipShape
property uses aCircle
shape with 280px diameter to crop the image into a perfect circle.
- The
-
Masking Example
In theProgressMaskExample
struct:- A
ProgressMask
object is applied to anImage
via themask
property, creating a progress-based mask. Animation effects are configured including duration, curve, delay, iterations, and play mode. - Button click events control:
-
updateProgress
: Increases the mask’s progress value -
updateColor
: Changes the mask color -
enableBreathingAnimation
: Toggles the breathing glow animation when progress reaches 100%
-
- A
Shape clipping provides powerful styling capabilities for components, enabling various personalized UI effects. Developers can flexibly utilize these properties and methods to optimize application interfaces based on specific requirements.