如何使重疊的圖像可懸停和可點擊？

Question

我正在研究一個人體模型，它具有特定的器官，需要突出顯示並懸停在頂部並可以單擊。 困難的部分，例如：肺與心臟重疊，如何在不將心臟放在肺上的情況下使心臟可點擊？

我嘗試使用透明的SVG，但也無法使其正常工作。

謝謝！

Answer 1

您需要一種“命中測試”機制。 它是這樣的：

1. 將形狀的輪廓保持在JS結構中
2. 在圖形上只有一個表面可接收所有鼠標單擊事件
3. 單擊表面時，使用傳遞的坐標查找在（1）中被命中的形狀

---

另外，切換圖形為載體將提供此功能開箱即用 ，但可升級顯卡的額外優勢。 缺點是：舊的瀏覽器和增加的處理以生成向量。

Answer 2

您有心臟，肺等的輪廓路徑嗎？

如果是，則只需使用context.isPointInPath對每個器官進行命中測試。

如果否，則可以將每個器官繪制到其自己的畫布上，然后使用context.getImageData命中測試鼠標下的像素對於任何特定的器官畫布是否不透明。

這是對像素數據進行點擊測試的示例：

突出顯示鼠標懸停的器官：

 var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var cw=canvas.width; var ch=canvas.height; var $canvas=$("#canvas"); var canvasOffset=$canvas.offset(); var offsetX=canvasOffset.left; var offsetY=canvasOffset.top; var heartCanvas=document.createElement('canvas'); var heartCtx=heartCanvas.getContext('2d'); var lungsCanvas=document.createElement('canvas'); var lungsCtx=lungsCanvas.getContext('2d'); heartCanvas.width=lungsCanvas.width=canvas.width; heartCanvas.height=lungsCanvas.height=canvas.height; var heart={canvas:heartCanvas,x:100,y:125,alpha:0.25}; var lungs={canvas:lungsCanvas,x:65,y:105,alpha:0.25}; var imgCount=3; var bodyImg=new Image();bodyImg.onload=start;bodyImg.src="https://dl.dropboxusercontent.com/u/139992952/multple/humanOutline.png"; var heartImg=new Image();heartImg.crossOrigin='anonymous';heartImg.onload=start;heartImg.src="https://dl.dropboxusercontent.com/u/139992952/multple/heart.png"; var lungsImg=new Image();lungsImg.crossOrigin='anonymous';lungsImg.onload=start;lungsImg.src="https://dl.dropboxusercontent.com/u/139992952/multple/lungs.png"; function start(){ if(--imgCount>0){return;} var data; heartCtx.drawImage(heartImg,heart.x,heart.y); data=heartCtx.getImageData(0,0,cw,ch).data; heart.pixels=[]; for(var i=0;i<data.length;i+=4){heart.pixels.push(data[i+3]);} lungsCtx.drawImage(lungsImg,lungs.x,lungs.y); data=lungsCtx.getImageData(0,0,cw,ch).data; lungs.pixels=[]; for(var i=0;i<data.length;i+=4){lungs.pixels.push(data[i+3]);} $("#canvas").mousemove(function(e){handleMouseMove(e);}); draw(); } function draw(){ ctx.clearRect(0,0,cw,ch); ctx.globalAlpha=0.25; ctx.drawImage(bodyImg,0,0); ctx.globalAlpha=heart.alpha; ctx.drawImage(heartCanvas,0,0); ctx.globalAlpha=lungs.alpha; ctx.drawImage(lungsCanvas,0,0); ctx.globalAlpha=1.00; } function handleMouseMove(e){ // tell the browser we're handling this event e.preventDefault(); e.stopPropagation(); mouseX=parseInt(e.clientX-offsetX); mouseY=parseInt(e.clientY-offsetY); var heartPixelAlpha=heart.pixels[mouseY*cw+mouseX]; heart.alpha=(heartPixelAlpha>0)?1.00:0.25; var lungsPixelAlpha=lungs.pixels[mouseY*cw+mouseX]; lungs.alpha=(lungsPixelAlpha>0)?1.00:0.25; draw(); } 

 body{ background-color: ivory; } #canvas{border:1px solid red;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <h4>Hover mouse over 1+ organs to highlight them</h4> <canvas id="canvas" width=300 height=330></canvas>