Question

我在这里对如何与画布中的图像进行交互感到困惑。

我的图片已加载，但我希望能够点击指定的图片并找出鼠标点击的图片。

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

Answer 1

没有在画布上试过，但也许它可以帮助（部分是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;
};

Answer 2

您使用的是任何JavaScript库吗？我建议用同一个类将div中的所有图像包装起来然后做这样的事情：

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

在这种情况下，这应该引用事件，而elm应该是您单击的元素。然后，您可以对该元素执行任何操作。

鼠标在画布上的位置

2 个答案: