如何检测鼠标位置是否悬停 [英] How to detect if mouse position is hovering

问题描述

我有这个讨论指示如何制作铅笔工具.

I have this discussion which indicates how to make a pencil tool.

如何使用铅笔工具检测鼠标是否悬停在绘制的区域/点/图像上?然后通过在其上创建一个圆来突出显示起点和终点.

How can I detect whether the mouse is hovering on drawn area/points/images using the pencil tool? Then it will highlight the starting point and the end point by creating a circle on it.

推荐答案

您唯一的解决方案是将所有绘制的点保存到数组中，它们本身保存在包含所有路径的一个数组中:

The only solution in your case is to save all drawn points into arrays, themselves saved in one array containing all your pathes :

• onmousedown:创建一个新的路径数组.
• onmousemove:
  -如果绘制->用绘制的每个点填充currentPath的数组.
  -else->检查鼠标的实际坐标是否在您的任何路径数组中.

• onmousedown : create a new path array.
• onmousemove:
  -- if drawing -> fill the currentPath's array with every drawn points.
  -- else -> check if the actual mouse coordinates are in any of your path arrays.

var ctx = canvas.getContext("2d"),
  painting = false,
  lineThickness = 1;

canvas.width = canvas.height = 600;

var dCanvas = canvas.cloneNode(true);
dCtx = dCanvas.getContext('2d');
pCanvas = canvas.cloneNode(true);
pCtx = pCanvas.getContext('2d');
dCtx.fillStyle = "#FFF";
pCtx.fillStyle = "red";
ctx.fillRect(0, 0, 600, 600);

var pathes = [],
  currentPath;

canvas.onmousedown = function(e) {
  currentPath = [];
  pathes.push(currentPath);
  painting = true;
};

canvas.onmouseup = function(e) {
  painting = false;
}

canvas.onmousemove = function(e) {
  pCtx.clearRect(0, 0, canvas.width, canvas.height);
  var mouseX = e.pageX - this.offsetLeft,
    mouseY = e.pageY - this.offsetTop;
  if (painting) {   
    var lastPoint = currentPath[currentPath.length-1] || {
      x: e.pageX - canvas.offsetLeft,
      y: e.pageY - canvas.offsetTop
    };
    var x1 = mouseX,
      x2 = lastPoint.x,
      y1 = mouseY,
      y2 = lastPoint.y;


    var steep = (Math.abs(y2 - y1) > Math.abs(x2 - x1));
    if (steep) {
      var x = x1;
      x1 = y1;
      y1 = x;

      var y = y2;
      y2 = x2;
      x2 = y;
    }
    if (x1 > x2) {
      var x = x1;
      x1 = x2;
      x2 = x;

      var y = y1;
      y1 = y2;
      y2 = y;
    }

    var dx = x2 - x1,
      dy = Math.abs(y2 - y1),
      error = 0,
      de = dy / dx,
      yStep = -1,
      y = y1;

    if (y1 < y2) {
      yStep = 1;
    }

    lineThickness = 5-Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1)) / 10;
    if (lineThickness < 1) {
      lineThickness = 1;
    }

    for (var x = x1; x < x2; x++) {
      if (steep) {
        dCtx.fillRect(y, x, lineThickness, lineThickness);
        currentPath.push({x: y,y: x});
      } else {
        dCtx.fillRect(x, y, lineThickness, lineThickness);
        currentPath.push({x: x,y: y});
      }

      error += de;
      if (error >= 0.5) {
        y += yStep;
        error -= 1.0;
      }
    }
    currentPath.push({x: mouseX,y: mouseY});
  } else {
    pathes.forEach(function(path) {
      if (path.some(function(point) {
        return isBetween(mouseX, point.x, 5) && isBetween(mouseY, point.y, 5)
      })) {
        pCtx.beginPath();
        pCtx.arc(path[0].x+2.5, path[0].y+2.5, 5, 0, Math.PI*2);
        pCtx.fill();

        pCtx.beginPath();
        pCtx.arc(path[path.length-1].x+2.5, path[path.length-1].y+2.5, 5, 0, Math.PI*2);
        pCtx.fill();
      }
    });
  }
  ctx.fillRect(0, 0, 600, 600);
  ctx.drawImage(dCanvas, 0, 0);
  ctx.drawImage(pCanvas, 0, 0);
}

function isBetween(x, y, z) {
  return (x >= y - z && x <= y + z);
}

canvas {
  border: 1px solid
}

<canvas id="canvas" width="500" height="500"></canvas>

这篇关于如何检测鼠标位置是否悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！