Как я могу сделать изображения, которые накладываются на палец?

Я работаю над моделью человеческого тела, которая имеет определенные органы, которые должны выделяться и выходить на вершину при наведении и быть кликабельными. Трудная часть, например: Легкие перекрывают сердце, как я могу сделать сердце кликабельным, не помещая его поверх легких?

Я попытался использовать прозрачные SVG, но не смог заставить их работать.

Благодарю!

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.drawimage(heartcanvas,0,0);="" ctx.drawimage(lungscanvas,0,0);="" 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();
}</data.length;i+=4){heart.pixels.push(data[i+3]);}>
body{ background-color: ivory; }
#canvas{border:1px solid red;}
<h4>Hover mouse over 1+ organs to highlight them</h4>


Вам нужен механизм "hit-test". Он работает следующим образом:

  1. сохранять контуры ваших фигур в структуре JS
  2. иметь одну поверхность на графике, получать все события щелчка мыши
  3. когда щелкнуть по поверхности, используйте пройденные координаты, чтобы найти, какая фигура попала в (1)

Альтернативно, переключение графики в векторы обеспечит эту функциональность из коробки, но добавит преимущества масштабируемой графики. Недостатками этого являются: старые браузеры и увеличенная обработка для генерации векторов.

licensed under cc by-sa 3.0 with attribution.