Div覆盖画布，鼠标悬停

Question

我有画布区，我可以添加一些图像。 我想将整个画布切割成零件并只下载图像的一部分。

如果我把div与彩色叠加画布，我不能移动我的元素。 但我想向用户显示已选择哪个区域并将被下载。

是否可以显示一些divs overlay canvas并使用canvas进行管理？

如果不能，我怎么能听到我的div不可见的鼠标悬停事件，因为z-index比我的画布图像低？

Answer 1

您可以在图片画布顶部使用第二个（叠加）画布，而不是尝试为div设置颜色，以便在下方对图像画布的所需部分进行着色。

• 定义表示画布每个部分（矩形）的javascript对象。
• 在图片画布上放置第二个叠加画布，告诉它不要使用CSS发出事件：pointer-events:none。
• 在鼠标移动时，用半透明颜色填充鼠标下方的叠加画布部分。

以下是示例代码和演示：

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>