座標鼠標帆布

所以......我創建的canvas元素使用jQuery：座標鼠標帆布

var canvasElement = $("<canvas id='map' width='" + CANVAS_WIDTH + "' height='" + CANVAS_HEIGHT + "'></canvas"); 
var canvas = canvasElement.get(0).getContext("2d"); 
canvasElement.appendTo('body');

，現在我想鼠標座標，但接下來的代碼不起作用：

canvasElement.onmousemove = mousemove; 
function mousemove(evt) { 
    var mouseX = evt.pageX - canvasElement.offsetLeft; 
    var mouseY = evt.pageY - canvasElement.offsetTop; 
    alert(mouseX+":"+mouseY); 
}

canvasElement .offsetLeft不工作，evt.pageX太...幫助！

來源

2012-11-08 Arti

你必須定義功能鼠標移動（）你嘗試調用之前？ – Brant

這在運行時是不相關的。函數聲明被掛起。 –

如何做到這一點？：D – Arti

這些屬性不是跨瀏覽器的。

我知道兩種解決方案來獲得畫布位置：

簡單一個：使用jQuery offset

另一個問題：使用自定義的和複雜的代碼：

if (!canvasElement.offsetX) { 
    // firefox 
    var obj = canvasElement; 
    var oX = obj.offsetLeft;var oY = obj.offsetTop; 
    while(obj.parentNode){ 
     oX=oX+obj.parentNode.offsetLeft; 
     oY=oY+obj.parentNode.offsetTop; 
     if(obj==document.getElementsByTagName('body')[0]){break} 
     else{obj=obj.parentNode;} 
    } 
    canvas_position_x = oX; 
    canvas_position_y = oY; 
} else { 
    // chrome 
    canvas_position_x = canvasElement.offsetX; 
    canvas_position_y = canvasElement.offsetY; 
}

由於存在循環，所以最好存儲canvas_position_x和canvas_position_y並在每個循環中重新計算它們文檔resize而不是每個mousemove。

Demonstration

來源

2012-11-08 19:58:12

你們在我的問題中如何如此快速地回答？：D thx，我嘗試這種方法tommorow – Arti

我從我的一箇舊程序中複製粘貼。 –

如果您可以使用jQuery，我建議使用它，而不是因爲其他解決方案不好，但要有一個更清潔和更輕的代碼。 –

Live Demo

它很容易居然沒有jQuery的。下面是小提琴的重要部分。 cX和cY是被點擊的畫布的座標。

function clicked(e) { 
    var cX = 0, 
     cY = 0; 

    if (event.pageX || event.pageY) { 
     cX = event.pageX; 
     cY = event.pageY; 
    } 
    else { 
     cX = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 
     cY = event.clientY + document.body.scrollTop + document.documentElement.scrollTop; 
    } 

    cX -= canvas.offsetLeft; 
    cY -= canvas.offsetTop; 

    ctx.fillRect(cX, cY, 2, 2); 

}

Demo with mouse move

來源

2012-11-08 20:28:57 Loktar

，但我不需要鼠標點擊... – Arti

@ user1786016將它應用於鼠標移動的作用是一樣的，我只是用鼠標移動添加了另一個演示鏈接。 – Loktar

座標鼠標帆布

回答

相關問題