QT 5.7 QML быстрый полупрозрачный прямоугольник со скругленными углами с одной стороны

Мне нужна полупрозрачная прямоугольная форма с использованием Qt Quick QML, но с закругленными углами только с одной стороны.

Это что-то вроде прямоугольника, который мне нужен. Если бы он не был прозрачным, я бы, вероятно, просто перекрыл 2 прямоугольника, один с закругленными углами, а другой без. Однако с прозрачностью это не работает, так как перекрытие становится темнее.

     ----------|
   /           |
 /             | 
|              |
|              |
|              |
 \             | 
   \           |   
     ----------|

У кого-нибудь есть идеи?


qt qml qtquickcontrols qt5.7
person James    schedule 01.11.2016    source источник
comment
Я думаю, что единственный способ сделать это Canvas   -  person folibis    schedule 01.11.2016

Ответы (1)


arrow_upward
10
arrow_downward

Вы можете использовать обрезку (см. документация по производительности), чтобы отрезать углы одного скругленного прямоугольника:

import QtQuick 2.5
import QtQuick.Window 2.2

Window {
    width: 300
    height: 300
    visible: true

    Item {
        width: 100
        height: 100
        anchors.centerIn: parent
        clip: true

        Rectangle {
            anchors.fill: parent
            anchors.rightMargin: -radius
            radius: 10
            color: "navajowhite"
            opacity: 0.5
        }
    }
}

Вы также можете использовать слои, чтобы избежать проблема перекрывающейся прозрачности:

import QtQuick 2.5
import QtQuick.Window 2.2

Window {
    width: 300
    height: 300
    visible: true

    Item {
        width: 100
        height: 100
        opacity: 0.5
        layer.enabled: true
        anchors.centerIn: parent

        Rectangle {
            color: "navajowhite"
            radius: 10
            anchors.fill: parent
        }
        Rectangle {
            color: "navajowhite"
            anchors.fill: parent
            anchors.leftMargin: 10
        }
    }
}

Как упомянуто @folibis, вы также можете использовать Canvas для который уже есть аналогичный ответ.

person Mitch    schedule 01.11.2016