How to deal with borderRadius not taking effect after clipShape is used for clipping
Problem Description
After clipShape is used to clip a container component, borderRadius cannot be used to set the rounded corners of the clipped container, as shown in the following figure:
Background knowledge
1. How to set component rounded corners
1.1 borderRadius
The borderRadius attribute is used to set the rounded corners of the component border. You can set the four corners at the same time or set the rounded corner sizes of the four corners separately. To avoid the subcomponent covering the rounded corners due to the size of the component being larger than the component, you can use it with the attribute clip.
1.2 clipShape
The clipShape property is used to clip the shape of components. By passing in different component types, the components can be clipped to the corresponding shapes.
2. How to draw rounded corners
2.1 Path
Path is a path drawing component that can draw the required shape through the commands attribute, including rounded corners (rounded polygons).
Regarding [the relationship between Bezier curves and control points : it is determined by a set of vectors of control points, and the given control points are connected in sequence to form a control polygon.
2.2 The difference between Path and clipShape
Path is a drawing component that draws the required shape by setting the path. Its fill area is usually a color rather than an image.
clipShape is a common property. By setting different component types, you can clip components. The clipped shape background is part of the component. For example, if you clip an Image component, the clipped shape background is part of the Image component image.
Positioning ideas
The borderRadius attribute is relative to the size of the component. When a component sets both borderRadius and clipShape, borderRadius will take effect first and set the rounded corner effect for the entire component. Then the clipShape clipping effect will cover the rounded corner effect of borderRadius, causing borderRadius to fail to take effect.
Solution
1.Set rounded corners for clipped components
When clipShape is used to clip components, the corners that need to be set to rounded corners are rounded according to requirements. The clipped component can be a container component (such as Column, Row, etc.) or an Image component.
Note:
You cannot set the clipShape property twice to perform multiple clippings, otherwise the last clipShape clipping will overwrite the previous clipShape clippings.
The following example sets the clipShape property for the Image component and uses the PathShape shape to describe the shape of the component after clipping.
The code example is as follows:
@Entry
@Component
struct ClipFilletCorner {
// Define the route drawn by PathShape
/*
Draw the original graphics, that is, do not crop. The unit of drawing the route is px, and the default unit of width and height is vp. You can use the pixel unit conversion method to convert as needed
*/
commands1:string=`M0 0 L${vp2px(300)} 0 L${vp2px(300)}${vp2px(200)} L0 ${vp2px(200)} Z`
/*
Crop the image into a triangle
* The command M in commands is used to define the starting point of drawing, such as M0 0 is used to define the point (0, 0) as the starting point of drawing
* The command L in commands is used to draw a straight line from the current point to the specified point, such as L600 0 is used to draw a straight line from the current point to (600, 0)
* The command Z in commands is used to draw a straight line from the current point to the starting point and end the drawing
*/
commands2:string='M0 0 L600 0 L600 300 Z'
/*
Crop the image into an irregular shape with rounded corners
* The command H in commands draws a horizontal line from the current point to the point with the corresponding x coordinate, such as M0 100 H300 draws a horizontal line from (0, 100) to (300, 100)
* The command V in commands draws a vertical line from the current point to the point with the corresponding y coordinate, such as M100 0 V300 draws a vertical line from (100, 0) to (100, 300)
* The command S in commands draws a quadratic Bezier curve from the current point to the end point. The first two values are to set the control points, and the last two values are the end points of the curve
*/
commands3:string='M0 100 S0 0 100 0 H300 S400 0 400 100 V300 S400 400 300 400 H200Z'
@State shapeNum:number=1
build() {
Column() {
// Image to be cropped
Image($r('app.media.startIcon'))
.height(200)
.width(300)
.margin({top:10, bottom:10})
.objectFit(ImageFit.Cover)
.borderRadius({topRight:5})
.clipShape(newPathShape().commands(this.shapeNum===1?this.commands1:this.shapeNum===2?this.commands2:this.commands3))
// Define the command controller
Row() {
Button('Original')
.type(ButtonType.Capsule)
.width(80)
.onClick(() => {
this.shapeNum=1
})
Button('Triangle')
.type(ButtonType.Capsule)
.width(80)
.onClick(() => {
this.shapeNum=2
})
Button('Irregular')
.type(ButtonType.Capsule)
.width(80)
.onClick(() => {
this.shapeNum=3
})
}.width(300)
.height(100)
.justifyContent(FlexAlign.SpaceEvenly)
}.width('100%')
.height('40%')
.backgroundColor(Color.Orange)
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
}
}
Rendering:
2.Draw components with rounded corners
In some scenarios, you may need to draw graphics with rounded corners or other shapes. In this case, you can use the Path component to draw.
The code example is as follows:
@Entry
@Component
struct PathFilletCorner {
build() {
Row() {
// Draw the irregular shape with rounded corners in the previous example
Path()
.fill(Color.Pink)
.stroke(Color.Blue)
// The commands are the same as commands3 in the previous example
.commands('M0 100 S0 0 100 0 H300 S400 0 400 100 V300 S400 400 300 400 H200Z')
// Draw a triangle with rounded corners
Path()
.fill(Color.Brown)
.commands('M120 150 L480 150 S600 150 480 90 L360 30 S300 0 240 30 L120 90 S0 150 120 150Z')
}.width('100%')
.height('40%')
.backgroundColor(Color.Orange)
.justifyContent(FlexAlign.SpaceEvenly)
.alignItems(VerticalAlign.Center)
}
}
Rendering:
Summary
When setting the rounded corners of a component, you can use the borderRadius property.
When you need to set the rounded corners of a clipped component, the effect of the borderRadius property will be overwritten. When clipShape is used to clip the component, you can use the PathShape shape to clip the shape and rounded corners as needed.
When you need to draw a graphic with rounded corners, you can use the Path component to draw it.
Top comments (0)