Div наложения холст, Mouseover

Question

У меня есть область холста, где я могу добавить несколько изображений. И я хочу разрезать весь холст на части и загрузить только одну часть изображения.

Если я поместил divs с холстом наложения цвета, я не могу перемещать элементы внутри. Но я хочу показать пользователям, какая область была выбрана и будет загружена.

Можно ли показать наложение холста divs, а также управлять холстом?

Если я не могу прослушивать событие mouseover для моего div, которое невидимо, потому что имеет более низкий индекс z, чем мой холст-изображение?

Answer 1

Вместо того, чтобы пытаться покрасить ваши div, вы используете второй (наложенный) холст поверх своего холста изображения, чтобы подкрасить нужные части холста изображения.

• Определить объект javascript, представляющий каждую часть (прямоугольник) вашего холста.
• Поместите второй накладной холст поверх холста изображения и скажите ему, что он не испускает события, используя CSS: pointer-events:none.
• На mousemove заполните часть наложенного холста под мышью полупрозрачным цветом.

Вот пример кода и демо:

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var overlay=document.getElementById("overlay"); 
 
var octx=overlay.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 
function reOffset(){ 
 
    var BB=canvas.getBoundingClientRect(); 
 
    offsetX=BB.left; 
 
    offsetY=BB.top;   
 
} 
 
var offsetX,offsetY; 
 
reOffset(); 
 
window.onscroll=function(e){ reOffset(); } 
 
window.onresize=function(e){ reOffset(); } 
 

 

 

 
var selectedPart=1; 
 
var parts=[]; 
 

 
var img=new Image(); 
 
img.onload=start; 
 
img.src='https://dl.dropboxusercontent.com/u/139992952/multple/sailboatSmall.png'; 
 
function start(){ 
 

 
    cw=canvas.width=overlay.width=img.width; 
 
    ch=canvas.height=overlay.height=img.height; 
 

 
    octx.font='18px verdana'; 
 
    octx.textAlign='center'; 
 
    octx.textBaseline='middle'; 
 
    octx.lineWidth=0.50; 
 
    octx.fillStyle='red'; 
 
    octx.globalAlpha=0.10; 
 

 
    parts.push({x:0,y:0,w:cw/3,h:ch/2}); 
 
    parts.push({x:cw/3,y:0,w:cw/3,h:ch/2}); 
 
    parts.push({x:cw*2/3,y:0,w:cw/3,h:ch/2}); 
 
    parts.push({x:0,y:ch/2,w:cw/2,h:ch/2}); 
 
    parts.push({x:cw/2,y:ch/2,w:cw/2,h:ch/2}); 
 

 
    ctx.drawImage(img,0,0); 
 

 
    $("#canvas").mousemove(function(e){handleMouseMove(e);}); 
 
} 
 

 
function handleMouseMove(e){ 
 
    // tell the browser we're handling this event 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 

 
    var x=parseInt(e.clientX-offsetX); 
 
    var y=parseInt(e.clientY-offsetY); 
 

 
    for(var i=0;i<parts.length;i++){ 
 
    var p=parts[i]; 
 
    if(x>p.x && x<p.x+p.w && y>p.y && y<p.y+p.h){ 
 
     if(i==selectedPart){return;} 
 
     selectedPart=i; 
 
     octx.clearRect(0,0,cw,ch); 
 
     octx.fillRect(p.x,p.y,p.w,p.h); 
 
    } 
 
    } 
 
}

body{ background-color:white; } 
 
#container{position:relative;} 
 
#canvas,#overlay{position:absolute;} 
 
#overlay{pointer-events:none;border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<h4>Move mouse over image parts</h4> 
 
<div id=container> 
 
    <canvas id="canvas" width=300 height=300></canvas> 
 
    <canvas id="overlay" width=300 height=300></canvas> 
 
</div>