鼠标在画布上的位置

我在这里对如何与画布中的图像进行交互有点困惑。鼠标在画布上的位置

我的图像加载，但我希望能够点击给定的图像，并找出鼠标点击了哪个图像。

但是图像可以被偏移，这使得事情更加混乱，所以我想知道是否有某种数学方法来计算鼠标点击画布时的结果？

2012-02-28 Sir

由于图像基本上都是矩形，[这个答案]（HTTP： //stackoverflow.com/questions/6452791/interacting-with-canvas-rectangle/6452867#6452867）可能会有所帮助。 – pimvdb 2012-02-28 23:42:16

可能的重复http://stackoverflow.com/questions/5690943/calculate-the-xy-position-of-a-canvas-point – Soren 2012-02-28 23:43:21

http://stackoverflow.com/questions/5085689/tracking-mouse-position-in -canvas – Soren 2012-02-28 23:44:40

没试过在画布上，但也许它可以帮助（部分为jQuery的），基地依托DOM功能elementFromPoint（）：

getElemFromPos = function(x,y,def) 
{ 
var f = 'elementFromPoint', 
    x=parseInt(x),y=parseInt(y),d=$j(document); 
if(!d[0][f] || isNaN(x) || isNaN(y)) return def; 
var w=$(window),bRel=0; 
if(!d[0].__ajqefpc) 
{ 
    var sl=d.scrollTop(); 
    if(sl >0) 
    { bRel = (d[0][f](0, sl + w.height() -1) == null); } 
    else if((sl = d.scrollLeft())>0) 
     { bIsRel = (d[0][f](sl + w.width() -1, 0) == null); } 
    d[0].__ajqefpc=(sl>0); 
} 

if(!bRel) 
{ 
    x += d.scrollLeft(); 
    y += d.scrollTop(); 
} 

var r = d[0][f](x,y); 
return (r && r!=null)?r:false; 
};

来源

2012-02-29 00:23:00 Codebeat

啊，很高兴看到它工作，谢谢。 – Codebeat 2012-02-29 00:56:38

你使用任何JavaScript库？我建议wrappping在一个div所有的图像，然后用同一类做这样的事情：

jQuery('.imageWrapper').click(function(elm){ 
    console.log(this , elm); 
    //some code to run here 
}

在这种情况下这应该是指事件，榆树应该是元素，你点击。然后，你可以做任何你需要的元素。

来源

2012-02-29 00:14:21 Xenology

我不知道你可以围绕画布绘制与div：S – Sir 2012-02-29 00:16:33

我不明白为什么你他们不能插入Dom吗？ – Xenology 2012-03-16 19:41:03

鼠标在画布上的位置

回答

相关问题