鼠標在畫布上的位置

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應該是您單擊的元素。 然后，您可以對該元素執行任何所需的操作。