Блог

Главная - Вопросы по программированию - Как сделать часть прямоугольника исчезающей / невидимой QML Qt

Как сделать часть прямоугольника исчезающей / невидимой QML Qt

#qt #qml

#qt #qml

Вопрос:

Я создаю пользовательский GroupBox в QML, и в настоящее время у меня есть это

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

Которые отображаются следующим образом

Вы можете видеть, что заголовок моего выпадающего списка имеет границу прямоугольника на заднем плане. Все, что я хочу, это удалить часть границы прямоугольника, которая находится за заголовком.

Есть ли решение моей проблемы? Или любым другим способом у меня может быть такой групповой ящик. Заранее спасибо

Комментарии:

1. Вы можете попробовать нарисовать линию с помощью canvas

2. Я думаю, вам следует удалить текст в верхнем регистре, поскольку это выглядит неуважительно.

3. Подходит ли использование canvas в этом состоянии? Как вы можете видеть в моем коде, у меня есть несколько прямоугольников, где я буду размещать холст? могу ли я нарисовать закругленную линию на холсте, как вы можете видеть в прикрепленной привязке? Не могли бы вы предоставить какой-нибудь код? С уважением

4. @folibis Я удалил текст в верхнем регистре. Я не хотел быть неуважительным.

5. Я думаю, Canvas это то, что вам нужно, как сказал @user2436719. Вот простой пример рисования прямоугольника с закругленными углами, с которого вы можете начать.

Ответ №1:

Вы Rectangle заменяете белую рамку на 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();
    }
}

Вы можете использовать combo_box_title_text.contentWidth , чтобы точно соответствовать размеру вашего текста