1

我正在使用 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 都会消失。

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

4

1 回答 1

7

根据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();

最后，为了您的方便，我已经分叉了您的小提琴并实施了上述建议。

于 2013-12-10T21:00:59.903 回答