Как создать фигуру с отверстием в QML?

Question

Я хочу создать своего рода маскирующий слой, который состоит из черной области с отверстиями в нем.Сквозь отверстия должно быть видно фон.В простейшей версии I это просто прямоугольник, закрывающий весь экран с отверстием посередине.Как показано на рисунке ниже.

Мой первый подход состоял в том, чтобы использовать функцию Context2D в QML: https://doc.qt.io/qt-5/qml-qtquick-context2d.html. Возможно, это совершенно неправильносделайте это так, но, возможно, это хорошая отправная точка.Я попытался создать прямоугольник (который работает) и область отсечения (которая не работает).Помимо того факта, что моя реализация отсечения не работает, у меня была бы проблема, что команда clip () стирает область вне ее пути, но не внутри (по крайней мере, это то, что я понял из документов: https://doc.qt.io/qt-5/qml-qtquick-context2d.html#clip-method).

Canvas {

    anchors.fill: parent

    onPaint: {
        var ctx = getContext("2d");
        ctx.fillStyle = "black"

        ctx.beginPath();
        ctx.fillRect(0, 0, Sizes.rootWindow.width, Sizes.rootWindow.height);
        ctx.fill();
    }

Answer 1

Я сам нашел решение, перечитав документы Qt.Существует функция для создания прозрачных прямоугольников внутри данного холста, которая называется «clearRect (...)»: https://doc.qt.io/qt-5/qml-qtquick-context2d.html#clearRect-method

Canvas {

    anchors.fill: parent

    onPaint: {
        var ctx = getContext("2d");
        ctx.fillStyle = "black"

        ctx.beginPath();
        ctx.fillRect(0, 0, 1000, 600);
        ctx.fill();

        ctx.clearRect(10, 10, 600, 100)

    }

---

Для более сложных фигур OpacityMask предложенный Фрэнком Остерфельдом - определенно способ решить эту проблему.Но для прямоугольника я думаю, что мое решение более прямолинейно.

Answer 2

, если отверстие точно отцентрировано и все границы имеют одинаковый размер, вы можете использовать прозрачный прямоугольник с границами:

Rectangle {
    anchors.fill: parent
    color: "transparent"
    border.color: "black"
    border.width: 50
}