带有 jCanvas 的 HTML5 Canvas : How to remove a layer

Question

我正在使用jCanvas构建一个HTML5应用程序，我需要移除一个图层，它是 Canvas 上的一个黑色圆圈，你可以看到代码here .

var cvLingualWidth = 945;
var cvLingualHeight = 100;

var cvLingual = document.getElementById("cvLingual");

function drawGrid() {
    var contextLingual = cvLingual.getContext("2d");

    for (var y = 0.5; y < cvLingualHeight; y += 6) {
        contextLingual.moveTo(0, y);
        contextLingual.lineTo(cvLingualWidth, y);
    }

    contextLingual.strokeStyle = "#DDD";
    contextLingual.stroke();
}

function drawCircle() {
    $("#cvLingual").drawArc({
        layer: true,
        name: "circleLayer_18",
        strokeStyle: "#000",
        strokeWidth: 2,
        x: 42,
        y: 70,
        radius: 8
    });
}

function clearCircle() {
    var circleLayer = $("#cvLingual").getLayer("circleLayer_18");
    // TODO
}

$(function () {
    drawGrid();
    drawCircle();
    $("#clear").click(function(){
        clearCircle();
    });
})

我试过 removeLayer() 但它不起作用。如果我清除 Canvas ，整个 UI 都将消失。

如何在不影响背景网格线的情况下清除圆圈？

Answer 1

根据removeLayer() documentation , removeLayer() 方法不会自动更新 Canvas 。之后您需要使用 drawLayers() 方法执行此操作。

$("#cvLingual").removeLayer("myLayer").drawLayers();

但是，drawLayers() 方法通过清除 Canvas 并重新绘制所有 jCanvas 层来工作，这意味着您的网格线将消失。要解决此问题，请使用 jCanvas 的 drawLine() 方法绘制网格线，如下所示:

$canvas.drawLine({
    layer: true,
    strokeStyle: "#DDD",
    strokeWidth: 1,
    x1: 0, y1: y,
    x2: cvLingualWidth, y2: y
});

作为旁注，如果您计划稍后(在 删除它之后)再次绘制圆，我建议将图层的 visible 属性设置为 false 暂时。然后，当您准备再次显示圆圈时，将其 visible 属性设置为 true。请注意，您需要调用 drawLayers() 来更新两个实例中的 Canvas 。

隐藏圆圈:

$("#cvLingual").setLayer({
    visible: false
}).drawLayers();

再次显示圆圈:

$("#cvLingual").setLayer({
    visible: true
}).drawLayers();

最后，为了您的方便，我有 forked your fiddle并落实了上述建议。