javascript - Div 覆盖 Canvas ，鼠标悬停

Question

我有 Canvas 区域，我可以在其中添加一些图像。我想将整个 Canvas 切割成几部分并只下载图像的一部分。

如果我将 div 与颜色叠加 Canvas 放在一起，我将无法在其中移动我的元素。但我想向用户显示哪个区域已被选中并将被下载。

是否可以显示一些 div 覆盖 Canvas 并使用 Canvas 进行管理？

如果不这样做，我怎么能为我的不可见的 div 监听鼠标悬停事件，因为它的 z-index 比我的 Canvas 图像低？

Answer 1

您无需尝试为 div 着色，而是使用图像 Canvas 顶部的第二个(覆盖) Canvas 来为下方图像 Canvas 的所需部分着色。

• 定义一个代表 Canvas 每个部分(矩形)的 javascript 对象。
• 在图像 Canvas 上放置第二个覆盖 Canvas ，并使用 CSS 告诉它不要发出事件:pointer-events:none。
• 在 mousemove 上，用半透明颜色填充鼠标下方的叠加 Canvas 部分。

这是示例代码和演示:

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>