Question

我将如何编码：当鼠标进入画布中的预定义区域时，会出现图像（已经对图像进行了排序），当退出所述预定义区域时，它会再次消失。

这都是使用jQuery。

提前致谢。

Answer 1

jQuery将跟踪canvas元素上的悬停/模糊，但不会跟踪画布内的各个绘图。在html画布上绘制的图像不是DOM元素。相反，它们就像画布上被遗忘的画像一样。

这些是将悬停效果应用于画布内的图像绘制的步骤：

在javascript对象中跟踪图像的定义（x，y，宽度，高度），
在画布上侦听mousemove事件，
测试鼠标是否在图像中，
当鼠标进入或离开您的圈子时，重绘或清除图像。

要使您的悬停/模糊效率更高，请跟踪以前的图像状态（可见/不可见），如果状态未更改，则不要执行任何操作。

这是示例代码和演示：

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 scrollX=$canvas.scrollLeft();
var scrollY=$canvas.scrollTop();

var lastMouseWasIn;
var currentMouseIsIn=false;
var imgDef={x:30,y:30};

var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/KoolSmall.png";
function start(){

  imgDef.width=img.width;
  imgDef.height=img.height;

  draw();

  $("#canvas").mousemove(function(e){handleMouseMove(e);});

}

function draw(){
  if(lastMouseWasIn===currentMouseIsIn){return;}
  ctx.clearRect(0,0,cw,ch);
  if(currentMouseIsIn){
    ctx.drawImage(img,imgDef.x,imgDef.y);
  }
  ctx.strokeRect(imgDef.x,imgDef.y,imgDef.width,imgDef.height);    
}

function handleMouseMove(e){
  e.preventDefault();
  e.stopPropagation();

  x=parseInt(e.clientX-offsetX);
  y=parseInt(e.clientY-offsetY);

  currentMouseIsIn = x>imgDef.x 
  && x<imgDef.x+imgDef.width 
  && y>imgDef.y 
  && y<imgDef.y+imgDef.height;

  draw();

  lastMouseWasIn=currentMouseIsIn;

}

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>Move mouse in and out of rectangle to show/hide image.</h4>
<canvas id="canvas" width=300 height=300></canvas>

用jQuery-鼠标移动到一个区域并退出的画布

1 个答案: