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() 上调用 code>A::onClicked，在cavas.drawGridLineAndUnitNum上绘制七条垂直线。如果按钮B被点击除了将chart.activeChart设置为30外，都与A::onClicked相同。我希望当 A 被点击时， Canvas 删除 B 产品被点击的画线，反之亦然。但实际上，它总是保留上次绘制的线。

Answer 1

A Context2D ，与特定的 Canvas 相关联，提供两个有用的功能:

• fillRect
• clearRect

在大多数情况下，可以简单地通过用背景色填充 Canvas 来“清除”它，即使用 fillRect。这就是 StocQt example 的方法，它有一个 white 背景。

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

我使用透明背景，因此 clearRect 适合我。