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 に答える