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

【问题标题】：How to create a shape with a hole in QML?如何在 QML 中创建带孔的形状？
【发布时间】：2019-05-24 17:17:34
【问题描述】：

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

我的第一个方法是使用 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();
    }

【问题讨论】：

如果您想要一些简单的解决方案，请创建 4 个矩形作为边框。
查看 OpacityMask

标签： qt qml shapes

【解决方案1】：

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

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

【讨论】：

我想创建任意放置的矩形。也许我的图形示例以这种方式过于简化和误导。

【解决方案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)

    }

Frank Osterfeld 建议的更高级的形状OpacityMask 绝对是解决这个问题的方法。但对于矩形，我认为我的解决方案更直接。

【讨论】：