CODEWITHSUNDEEP
qtqml
Farhan Haider
Farhan Haider

Reputation: 1714

Making a portion of Rectangle disapear/invisible QML Qt

I'm making a custom GroupBox in QML and currently I have this

Rectangle
{
    anchors.fill: parent
    color: "#55aaff"
    Rectangle
    {
        id: combo_box
        anchors.centerIn: parent
        color: "transparent"
        width: parent.width/2
        height: parent.height/2
        opacity: 0.3
        Rectangle
        {
            anchors.fill: parent
            color: "transparent"
            border.color: "#ffffff"
            border.width: 1
            radius: 20
        }
    }
    Rectangle
    {
        id: combo_box_title
        anchors.verticalCenter: combo_box.top
        anchors.left: combo_box.left
        anchors.leftMargin: 30
        width: 90
        height: 20
        opacity: 0.3
        color: "#55aaff"
    }
    Text
    {
        id: combo_box_title_text
        anchors.centerIn: combo_box_title
        font.family: "Comic Sans MS"
        font.pointSize: 9
        color: "#e1e100"
        text: "Game Settings"
    }

Which show up like this

You can see my ComboBox title has the Rectangle's border in the background. All I want is to remove the part of Rectangle's border that lies behind Title.

Is there a solution to my problem? Or any other way I can have this kind of GroupBox. Thanks in advance

Upvotes: 1

Views: 1018

Answers (1)

lolo
lolo

Reputation: 704

You replace the Rectangle with the white border with the Canvas:

Canvas {
    id: mycanvas
    anchors.fill: parent
    onPaint: {
        var ctx = getContext("2d");
        ctx.strokeStyle = 'white';
        ctx.beginPath();
        ctx.moveTo(120, 0);
        ctx.lineTo(mycanvas.width - 20, 0);
        ctx.arc(mycanvas.width - 20,20,20,-Math.PI/2, 0);
        ctx.lineTo(mycanvas.width, mycanvas.height - 20);
        ctx.arc(mycanvas.width - 20,mycanvas.height - 20,20,0, Math.PI/2);
        ctx.lineTo(20, mycanvas.height);
        ctx.arc(20,mycanvas.height - 20,20,Math.PI/2,Math.PI);
        ctx.lineTo(0, 20);
        ctx.arc(20,20,20,Math.PI,-Math.PI/2);
        ctx.lineTo(30, 0);
        ctx.stroke();
    }
}

You can use combo_box_title_text.contentWidth to fit exactly the size of your text

Upvotes: 2

Related Questions