繪製在鼠標位置處的橫在畫布上，非持續

我有這個綁定到我的畫布的鼠標移動事件：繪製在鼠標位置處的橫在畫布上，非持續

function(e){   
    var contDiv = $('#current_system_map'); 
    var offset = contDiv.offset(); 
    x = e.clientX-offset.left; 
    y = e.clientY-offset.top; 
    context.beginPath(); 
    context.moveTo(0,y); 
    context.lineTo(595,y); 
    context.moveTo(x,0); 
    context.lineTo(x,595); 
    context.strokeStyle = "rgb(255,255,255)"; 
    context.stroke(); 
}

，它工作正常，到一個點。繪製的十字是持久的，所以當鼠標移動時，繪製新的十字，但舊的十字仍然存在。我試圖重新繪製畫布，但導致十字架滯後，並保持相當遠離鼠標。

，所以我需要知道如何畫十字，使其DIS-出現，而不要是你畫在畫布上的東西在畫布上重新繪製一切

來源

2010-08-03 Arcath

你是如何重畫畫布的？如果您使用setInterval，則延遲可能太高。 – Castrohenge 2010-08-03 16:56:33

我剛將所有繪製代碼轉儲到函數中，然後在繪製交叉之前將其調用 – Arcath 2010-08-03 19:33:36

您是否考慮過使用CSS遊標（http://www.echoecho.com/csscursors.htm）？如果默認十字準線不能削減它，則可以改爲使用自定義.cur文件。 – 2011-09-11 18:07:04

通常你將不得不重新繪製在畫布內容擦除它。我建議你使用一個圖像元素作爲光標，並將其定位在絕對高於

或者你可以嘗試舊的技巧，並在畫布上用globalCompositeOperation='xor'繪製光標，然後在同一個地方再次繪製以擦除它。之後，您需要將globalCompositeOperation恢復爲source-over。

來源

2010-08-05 10:14:17 andrewmu

這種方法在Firefox 3.6.8中對我來說足夠快，可以在mousemove事件中完成。保存圖像繪製的十字線，然後恢復它清除之前：

爲了節省：

savedImage = new Image() 
savedImage.src = canvas.toDataURL("image/png")

的恢復：

ctx = canvas.getContext('2d') 
ctx.drawImage(savedImage,0,0)

來源

2010-11-26 03:32:16

如果你不想存儲它持續，你也可以看看SVG。

來源

2011-09-11 17:43:34

http://jsfiddle.net/PgKEt/2/ 這是我能做的最好的。如果您嘗試使用setInterval等來設置動畫效果，即使不需要它也會繼續進行重繪。因此，通過這樣做，基本上只有在鼠標移動時纔會重繪，並且只繪製2行，而不是您想要的任何內容。另外，如果你有任何檢測，如mousedown等，它必須在任何畫布頂部，否則它不會再檢測它們。

來源

2012-10-04 16:20:44 Vivix

繪製在鼠標位置處的橫在畫布上，非持續

回答

相關問題