有没有办法为不同的角指定不同的半径 [英] Is there any way to specify different radii for different corners

问题描述

谁能帮助我如何只圆一个矩形的一个角，如附图所示，其中红色矩形是我的子矩形.

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'
        }
    }
}

这篇关于有没有办法为不同的角指定不同的半径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！