没有库的画布中的鼠标位置?

时间:2012-03-06 23:47:51

标签: javascript canvas

我一直在寻找如何获得相对于画布的鼠标位置但没有JS库...除了jquery之外无法找到任何示例!

我用它来启动我的功能:

 canvas = document.getElementById("canvas");  
 ctx = canvas.getContext("2d"); 
 canvas.addEventListener("mousedown", mousePos, false);

但是e.pageX和e.pageY受画布位置的影响。我需要删除该问题,因此数学是正确的,所以它只基于画布。

这可以在没有JS库的情况下完成吗?正如我从未见过用jquery完成的那样,我试图尽可能地避免它。

3 个答案:

答案 0 :(得分:1)

var findPos = function(obj) {
    var curleft = curtop = 0;
    if (obj.offsetParent) { 
        do {
           curleft += obj.offsetLeft;
           curtop += obj.offsetTop; 
        } while (obj = obj.offsetParent);
    }
    return { x : curleft, y : curtop };
};

获取canvas元素的位置并从中减去x和y。

答案 1 :(得分:1)

我正在使用:

var x;
var y;
if (e.pageX || e.pageY)
{
    x = e.pageX;
    y = e.pageY;
}
else {
    x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
    y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; 
} 
x -= gCanvasElement.offsetLeft;
y -= gCanvasElement.offsetTop;

答案 2 :(得分:1)

首先,您需要获取canvas元素的偏移量,或者从左上角到右下角的距离。

当鼠标移动时,将偏移变量计入鼠标位置。

这段代码可以解决问题:

var canvas = document.getElementById("canvas");


var xOff=0, yOff=0;



for(var obj = canvas; obj != null; obj = obj.offsetParent) {
    xOff += obj.scrollLeft - obj.offsetLeft;
    yOff += obj.scrollTop - obj.offsetTop;
}



canvas.addEventListener("mousemove", function(e) {

                        var x = e.x + xOff;
                        var y = e.y + yOff;


                        var ctx = canvas.getContext('2d');
                        ctx.clearRect(0, 0, 100, 100);
                        ctx.fillText(x + " - " + y, 40, 40);  

                        }, true);