如何使重叠的图像可悬停和单击？

Question

我正在制作一个人体模型，它有特定的器官需要突出显示，并在悬停时到达顶部并可点击。困难的部分，例如:肺与心脏重叠，我如何才能使心脏可点击而不把它放在肺的上面？

​

​

我试过使用透明的SVG，但也没能让它们工作。

谢谢!

Answer 1

你需要一个“命中测试”机制。它是这样工作的：

1. 将形状的轮廓保留在JS结构中
2. 在图形上有一个单一的表面接收所有鼠标单击事件
3. 当单击该表面时，使用传递的坐标查找在(1)

中命中的形状

或者，将图形转换为矢量将提供此功能out of the box，但增加了可伸缩图形的优势。这样做的缺点是:旧的浏览器和增加了生成向量的处理。

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>

​