Question

我正在使用jCanvas构建HTML5应用程序，我需要删除一个图层，它是画布上的黑色圆圈，您可以看到代码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（），但它没有用。如果我清除画布，整个用户界面就会消失。

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

Answer 1

根据removeLayer() documentation，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属性设置为{{1暂时的。然后，当您准备好再次显示该圈子时，请将其false属性设置为visible。请注意，您需要调用true来更新两个实例中的画布。

隐藏圈子：

drawLayers()

再次展示圈子：

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

最后，为方便起见，我forked your fiddle已实施上述建议。

带有画布的HTML5画布：如何删除图层

1 个答案: