问题描述
谁能帮助我如何只圆一个矩形的一个角,如附图所示,其中红色矩形是我的子矩形.
Can anyone help me how to round only one corner of a rectangle like shown in attached pic where red rectangle is my child rectangle.
实际上,我有一个矩形,所有四个角都是圆形的(半径为 10).现在,我想在其中绘制一个新的矩形,并期望只有那个特定的角应该是圆的,谁会接触到父母的圆角.
Actually, I have a rectangle where all four corners rounded(radius 10). Now, i want to draw a new rectangle inside this and expecting only that particular corner should be rounded who touches the parent's round corner.
Rectangle
{
id: parent
radius: 10
width: 168
height: 168
visible: true
color: "black"
Rectangle
{
id: child
width: 100
height: 40
color: "red"
}
}
我尝试通过在子项中添加剪辑属性来做到这一点,但什么也没发生.
I tried to do this with adding clip property in child but nothing happened.
推荐答案
这是一个简单的例子.它在左上角是圆形的,但很容易调整到任何其他角落.此解决方案仅支持一个角,但对您来说可能就足够了吗?更多的角落有点复杂,所以再问一下你是否也需要这些.
Here is a simple example.It is rounded in the upper left corner, but is easily adjusted to any other corner. Only one corner is supported in this solution, but it might be enough for you?More corners are little more complex, so ask again if you would need those aswell.
Rectangle {
anchors.centerIn: parent
id: root
radius: 20
width: 300
height: 300
Rectangle {
id: clipper
width: 100
height: 100
color: 'transparent'
clip: true
Rectangle {
id: clipped
width: parent.width + radius
height: parent.height + radius
radius: root.radius
color: 'red'
}
}
}
这篇关于有没有办法为不同的角指定不同的半径的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!