坐标鼠标帆布

所以......我创建的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

坐标鼠标帆布

回答

相关问题