实施例

Question

我正在尝试使用HTML 5画布编写一个简单的地图。拖动鼠标可移动地图，然后单击选择最近的航点。但是，有一个问题。当我拖动鼠标时，我发布时仍然会收到单击事件。我希望只有在点击时没有动作才能得到它。

我尝试在 mousemove 事件处理程序中检查无移动事件，但没有成功：

function onMove(e) {
    if(e.movementX == 0 && e.movementY == 0) {
        console.log("a"); //never happens...
    }
}

我的问题是：有没有简单的方法，或者我应该检查新闻和发布活动是否在同一个地方？

这是我的代码：

function onMove(e) {
    console.log("moving");
}

function onClick(e) {
    console.log("clicked");
}

function init() {
    c = document.getElementById("MapCanvas");
    ctx = c.getContext("2d");
    c.addEventListener("click", onClick, true);
    c.addEventListener("mousemove", onMove, true);
}

Answer 1

以下是解决此问题的一种方法：

由于我们需要知道两个状态，我们需要两个标志（有些人更喜欢对象 - 它取决于你）：

var isDown = false;    // mouse button is held down
var isMoving = false;  // we're moving (dragging)

然后我们需要找到一种区分拖动和点击的方法。一种典型的方法是使用第一个点击点到当前点之间的半径（长度）：如果在外面我们认为它是一个拖动操作。

所以 -

var radius = 9 * 9     // radius in pixels, 9 squared
var firstPos;          // keep track of first position

（我们正在对9进行平方，因此我们不必为以后的每次鼠标移动事件计算平方根。）

然后我们可以定义我们的回调处理程序来考虑这些事情：

canvas.onmousedown = function(e) {
  firstPos = getXY(e); // record click position (see getXY function in demo)
  isDown = true;       // record mouse state
  isMoving = false;    // reset move state
};

可以在window对象上设置下一个处理程序，而不是canvas元素本身。这允许我们在按住鼠标按钮时移动到画布元素之外。我们需要在这里使用addEventListener()，所以我们也允许其他代码订阅：

window.addEventListener("mousemove", function(e) {
  if (!isDown) return; // we will only act if mouse button is down
  var pos = getXY(e);  // get current mouse position

  // calculate distance from click point to current point
  var dx = firstPos.x - pos.x,
      dy = firstPos.y - pos.y,
      dist = dx * dx + dy * dy;        // skip square-root (see above)

  if (dist >= radius) isMoving = true; // 10-4 we're on the move

  if (isMoving) {
    // handle move operation here
  }
});

最后我们检测到点击以及更新鼠标状态，这也是window对象：

window.addEventListener("mouseup", function(e) {
  if (!isDown) return;   // no need for us in this case
  isDown = false;        // record mouse state

  if (!isMoving) {
    // it was a click, handle click operation here
  }
});

然后最后的问题是点击路点。进行绝对检查（即x ===值）很少会变好，因为我们需要将鼠标按钮精确地放在那一点上。使用航点的宽度和高度来允许范围（假设路标的对象为wp）：

if (pos.x >= wp.x && pos.x < wp.x + wp.width && 
    pos.y >= wp.y && pos.y < wp.y + wp.height) { ... }

实施例

＆＃13;

var ctx = canvas.getContext("2d");
var wp = {x: 50, y:50, width:12, height:12};  // demo way-point
ctx.font = "20px sans-serif";
ctx.fillText("Click or click+move on this canvas...", 10, 30);
ctx.strokeRect(wp.x, wp.y, wp.width, wp.height);

var isDown = false;        // mouse button is held down
var isMoving = false;      // we're moving (dragging)
var radius = 9 * 9         // radius in pixels, 9 squared
var firstPos;              // keep track of first position

canvas.onmousedown = function(e) {
  ctx.clearRect(0,0,canvas.width,canvas.height);
  ctx.strokeRect(wp.x, wp.y, wp.width, wp.height);
  
  firstPos = getXY(e);
  isDown = true;           // record mouse state
  isMoving = false;        // reset move state
};

window.addEventListener("mousemove", function(e) {
  if (!isDown) return;     // we will only act if mouse button is down
  var pos = getXY(e);      // get current mouse position

  // calculate distance from click point to current point
  var dx = firstPos.x - pos.x,
      dy = firstPos.y - pos.y,
      dist = dx * dx + dy * dy;        // skip square-root (see above)

  if (dist >= radius) isMoving = true; // 10-4 we're on the move

  if (isMoving) {
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.strokeRect(wp.x, wp.y, wp.width, wp.height);
    ctx.fillText("MOVING", 10, 30);
  }
});

window.addEventListener("mouseup", function(e) {
  if (!isDown) return;     // no need for us in this case
  isDown = false;          // record mouse state

  if (!isMoving) {
    if (firstPos.x >= wp.x && firstPos.x < wp.x + wp.width &&
        firstPos.y >= wp.y && firstPos.y < wp.y + wp.height) {
      ctx.fillText("CLICKED WAYPOINT", 10, 30);
    }
    else {
      ctx.fillText("CLICK", 10, 30);
    }
  }
});

function getXY(e) {
  var rect = canvas.getBoundingClientRect();
  return {x: e.clientX - rect.left, y: e.clientY - rect.top}
}

＆＃13;

canvas {background:#ccc}

＆＃13;

<canvas id=canvas width=620 height=180></canvas>

＆＃13;

在html 5画布上检测点击与拖动

1 个答案:

实施例