Reputation: 105

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.

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.

Upvotes: 5

Answers (7)

ahmedbm

Reputation: 1

                        background:  Rectangle {
                            
                            radius: isfirst || islast ? 15 : 0 
                            color : "lightgrey"   
                            clip: true
                            // Ajout du radius uniquement à gauche si c'est le premier
                               Rectangle {
                                   visible: isfirst
                                   width: parent.width + 15
                                   height: parent.height +15
                                   radius: 15
                                   color: "blue"
                                   
                                   anchors.left: parent.left
                               }
                           
                               // Ajout du radius uniquement à droite si c'est le dernier
                               Rectangle {
                                   visible: islast
                                   width: parent.width + 15
                                   height: parent.height + 15
                                   radius: 15
                                   color: "blue"
                                  
                                   anchors.right: parent.right
                               }
                            
                        }

Upvotes: 0

Wasif Raza

Reputation: 71

Individual corner radii can be set as well since Qt 6.7 version.

bottomLeftRadius : real (since 6.7)
bottomRightRadius : real (since 6.7)
topLeftRadius : real (since 6.7)
topRightRadius : real (since 6.7)

Upvotes: 3

Ambrus Tóth

Reputation: 672

Created this from a bunch of rectangles. Two big rectangles and 4 smaller optionally rounded squares. This way you can also make different radii for each corner, not only turning them on and off. You just need to make sure that you don't want a too big rounding, because then the rounded rect would stick out.

Upvotes: 1

S.M.Mousavi

Reputation: 5246

It is possible using Shape item as below:

Shape {
    id: advancedShape
    width: 100; height: 40
    vendorExtensionsEnabled: true
    layer.enabled: true
    layer.samples: 4
    layer.smooth: true

    // set following properties to specify radius
    property real tlRadius: 0.0
    property real trRadius: 15.0
    property real brRadius: 0.0
    property real blRadius: 0.0

    ShapePath {
        strokeColor: "transparent"
        fillColor: "red"

        startX: 0; startY: advancedShape.tlRadius
        PathArc {
            x: advancedShape.tlRadius; y: 0
            radiusX: advancedShape.tlRadius; radiusY: advancedShape.tlRadius
            useLargeArc: false
        }
        PathLine {
            x: advancedShape.width - advancedShape.trRadius; y: 0
        }
        PathArc {
            x: advancedShape.width; y: advancedShape.trRadius
            radiusX: advancedShape.trRadius; radiusY: advancedShape.trRadius
            useLargeArc: false
        }
        PathLine {
            x: advancedShape.width; y: advancedShape.height - advancedShape.brRadius
        }
        PathArc {
            x: advancedShape.width - advancedShape.brRadius; y: advancedShape.height
            radiusX: advancedShape.brRadius; radiusY: advancedShape.brRadius
            useLargeArc: false
        }
        PathLine {
            x: advancedShape.blRadius; y: advancedShape.height
        }
        PathArc {
            x: 0; y: advancedShape.height - advancedShape.blRadius
            radiusX: advancedShape.blRadius; radiusY: advancedShape.blRadius
            useLargeArc: false
        }
        PathLine {
            x: 0; y: advancedShape.tlRadius
        }
    }
}

and result will be as this:

NOTE The builtin Rectangle has more performance than Shape, but I recommend Shape over masking because it works on any environment.

NOTE 2 I think the most true way in production is using BorderImage as @dtech suggested IF the radius is known and you don't need to change radius dynamically.

Upvotes: 2

Асылжан Жансейт

Reputation: 1

Rectangle {
    id: clipper
    width: 10
    height: 10
    color: "transparent"
    clip: true

    Rectangle {
        id: clipped
        width: 30
        height: 30
        radius: 8
        color: "red"
    }
}

Upvotes: -1

derM

Reputation: 13701

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

Upvotes: 7

dtech

Reputation: 49319

Not with the stock Rectangle:

The same radius is used by all 4 corners; there is currently no way to specify different radii for different corners.

In C++ you could specify a horizontal and vertical radius, but still not per-corner radius. If you want such functionality, you will have to implement your own QQuickItem with the geometry node and all.

The result you want to achieve in the image could also be achieved with clipping, however unfortunately, in QML clipping only works for the item's rectangle, not the actual item geometry.

It will be easiest to achieve the desired effect using a BorderImage element. It enables to specify a different sub-image for every corner:

Upvotes: 4

Is there any way to specify different radii for different corners

Answers (7)

Related Questions