带有jCanvas的HTML5 Canvas:如何删除图层

Question

我正在使用jCanvas构建一个HTML5应用程序,我需要删除一个图层,这是画布上的黑色圆圈,你可以在这里看到代码.

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(),但它不起作用.如果我清除画布,整个UI将消失.

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

Answer 1

根据removeLayer()文档,该removeLayer()方法不会自动更新画布.之后您将需要使用该drawLayers()方法执行此操作.

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

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

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

作为旁注,如果您打算稍后再次绘制圆圈(删除后),我建议暂时将图层的visible属性设置为false.然后,当您准备再次显示圆圈时,将其visible属性设置为true.请注意,您需要调用drawLayers()以在两个实例中更新画布.

隐藏圆圈:

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

再次显示圆圈:

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

最后,为了您的方便,我已经分道扬琴并实施了上述建议.