在不同的x，y位置畫布重繪一個矩形

我有一個分佈在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和canvas的分層正在丟失，但我將它放置在其他地方，並且這不是問題。在不同的x，y位置畫布重繪一個矩形

這是我可能有人可能會在我的代碼中看到錯誤的代碼！由於

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是當前選擇的座標。

任何想法這裏有什麼不對？

來源

2013-05-12 Bernice

作者：「X，Y是當前選擇的座標」，你指的是光標座標嗎？ X和Y是如何確定的以及與什麼元素有關？ – Nikki 2013-05-13 09:45:18

居然是這個問題@Nikki！ x和y座標不能正確返回，因爲它們是根據視口而不是內容可編輯div進行計算的。請看這個問題，也許你可以回答：http://stackoverflow.com/questions/16524842/get-x-y-position-of-selection-relative-to-a-contenteditable-div – Bernice 2013-05-13 16:28:49

你爲什麼不重新因子

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-06 00:31:56 tdmartin

在不同的x，y位置畫布重繪一個矩形

回答

相關問題