javascript - 如何在qml中删除最后的 Canvas 颜料

Question

Canvas {
    id: canvas
    onPaint: {
        if (personalInfo.count === 0) {
            return
        }
        var ctx = canvas.getContext("2d");
        ctx.globalCompositeOperation = "source-over";
        var points = []
        for (var i = 0; i < personalInfoModel.dataCount(); i++) {
            var temp = personalInfoModel.get(i)
            points.push({
                            date: temp.date,
                            heartRate: temp.heartRate,
                            temprature: temp.temprature,
                            pressure: temp.bloodPressure
                        }
                        )
        }
        drawAxis(ctx)
        drawGridLineAndUnitNum(ctx, chart.activeChart, points, "x", 15); 
    }
}

我有两个按钮。如果按钮A单击，然后设置chart.activeChart至7并调用cavas.requestPaint()上A::onClicked ，于 cavas.drawGridLineAndUnitNum画七条垂直线。如果按钮B在设置chart.activeChart旁边点击至30 ，均与 A::onClicked 相同。我希望当A点击后， Canvas 会擦掉B产品所画的线被点击，反之亦然。但实际上，它总是保留上次绘制的线。

Answer 1

一个Context2D与特定 Canvas 关联，提供两个有用的函数:

• fillRect
• clearRect

在大多数情况下，只需用背景颜色填充Canvas即可“清除”Canvas，即使用fillRect。这就是 StocQt example 的方法，其背景为白色。

但是，如果背景是透明，填充它不会删除其他笔画，因此没有有多大意义。在这种情况下，清除 Canvas 的唯一可能方法是删除所有笔划，即使用 clearRect。

我使用透明背景，因此 clearRect 是我的最佳选择。