如何在QML中创建带有孔的形状？

Question

我想创建一种遮罩层，该遮罩层由一个黑色区域组成，其中带有孔。通过孔应该可以看到背景。在最简单的版本中，它只是一个覆盖整个屏幕的矩形，中间有一个开口。如下面的示例图片所示。

我的第一种方法是使用QML的Context2D功能：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

如果孔正好居中并且边框的大小都相同，则可以使用带有边框的透明矩形：

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

Answer 2

我自己通过重新阅读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建议的Frank Osterfeld而言，更高级的形状绝对是解决此问题的方法。但是对于矩形，我认为我的解决方案更为直接。