1

私はdivの上にキャンバスを重ねており、ロード時に位置0、0に長方形をペイントし、必要に応じて別の位置x、yに移動しようとしています。必要なx、y位置は完全に返されてclearRect(0, 0, canvas.width, canvas.height)おり、移動する必要があるときにメソッドを使用してキャンバスをクリアし、fillRect(x, y, width, height)それらの特定の位置で再描画するために再度使用しています。ただし、x、y の位置は良好で、fillRect(..) が呼び出されていますが (クロムでデバッグしました)、位置 0、0 で再描画したときにのみ、四角形が削除されて描画されます。それ以外の場合は、単に削除されます。最初はペイントされていると思いましたが、divとキャンバスのレイヤーが失われている可能性がありますが、別の場所に配置しましたが、これは問題ではありませんでした.

これは私が持っているコードです。誰かが私のコードに何か問題があることに気付くかもしれません! ありがとう

function removeCursor(connectionId) {
     var canvas = document.getElementById(connectionId);
     var ctx = canvas.getContext('2d');

     ctx.clearRect(0, 0, canvas.width, canvas.height); 
}

function paintCursor(x, y, connectionId, color) {
     var canvas = document.getElementById(connectionId);
     var context = canvas.getContext('2d');
     context.fillStyle = color;
     context.fillRect(x, y, 0.75, 5);
}

// the canvas is created on someone connecting to a specific page
if (someoneConnected) {
    var canvas = document.createElement("canvas");
    canvas.id = connectionId;
    canvas.className = 'canvases';
    canvas.style.zIndex = zindex;
    zindex++;

    var parentDiv = document.getElementById("editor-section");
    parentDiv.appendChild(canvas);

    paintCursor(0, 0, connectionId, color);

} else { // someone disconnected

    var canvas = document.getElementById(connectionId);
    canvas.parentNode.removeChild(canvas);
}

キープレスやクリックなどのユーザーイベントでメソッドremoveCursor(connectionId)を呼び出します。paintCursor(x, y, connectionId, color)X、Y は現在の選択範囲の座標です。

ここで何が問題なのですか？

4

1 に答える 1

0

にリファクタリングしてみませんか

function rePaintCursor(x, y, connectionId, color) {
    var canvas = document.getElementById(connectionId);
    var context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height); 
    context.fillStyle = color;
    context.fillRect(x, y, 0.75, 5);
}

私の推測では、x と y が正しければ、実行順序が邪魔になる可能性があります。

于 2013-09-06T00:31:56.450 に答える