获取鼠标位置

交互的第一步,就是获取鼠标的位置,或者是手指点击的位置。

可以通过重写以下事件完成:

鼠标相关

  • mousedown
  • mousemove
  • mouseup
  • mouseout

触摸相关

  • touchstart
  • touchmove
  • touchend

然后通过事件监听的方式与canvas进行交互

  canvas.addEventListener('mousedown', mouseDown, false);
  canvas.addEventListener('touchstart', mouseDown, false);
  canvas.addEventListener('mousemove', mouseMove, false);
  canvas.addEventListener('touchmove', mouseMove, false);
  canvas.addEventListener('mouseup', mouseUp, false);
  canvas.addEventListener('onmouseout', mouseUp, false);
  canvas.addEventListener('touchend', mouseUp, false);

获取鼠标位置的几种思路

  1. 通过 offset 计算

只需要获取点击位置相对于页面的 (x, y) 和 点击元素(即canvas盒子)的 (offsetLeft, offsetTop) 即可,相减得出 点击位置 相对于 点击元素(canvas)的偏移。

var clickX = (e.pageX || e.touches[0].pageX) - canvas.offsetLeft;
var clickY = (e.pageX || e.touches[0].pageY) - canvas.offsetTop;
  1. 通过 getBoundingClientRect 计算

通过getBoundingClientRect获取元素盒子基本参数,通过其 left 和 top 计算出 点击位置 相对于 点击元素(canvas)的偏移。

var box = element.getBoundingClientRect();
var clickX = (e.clientX || e.touches[0].clientX) - box.left;
var clickY = (e.clientY || e.touches[0].clientY) - box.top;

具体实现

window.onload = function(e) {
  var isMouseDown = false;
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");
  canvas.addEventListener('mousedown', mouseDown, false); // 鼠标按下
  canvas.addEventListener('touchstart', mouseDown, false); // 手指按下
  canvas.addEventListener('mousemove', mouseMove, false); // 鼠标移动
  canvas.addEventListener('touchmove', mouseMove, false); // 手指移动
  canvas.addEventListener('mouseup', mouseUp, false); // 鼠标抬起
  canvas.addEventListener('onmouseout', mouseUp, false); // 鼠标移出
  canvas.addEventListener('touchend', mouseUp, false); // 手指抬起
  function getPosition(e, element) {
    // 获得box对象,该对象中包含了当前canvas相对浏览器左上角的位置
    var box = element.getBoundingClientRect();
    // x 和 y 是相对于浏览器左上角的坐标
    // x - box.left 和 y - box.top:表示当前鼠标点击位置相对于canvas左上角的位置
    var x = e.clientX || e.touches[0].clientX;
    var y = e.clientY || e.touches[0].clientY;
    console.log(x - box.left, y - box.top)
  }
  function mouseMove (e) {
    // 阻止浏览器默认处理onmousemove的事件
    e.preventDefault();
    if (isMouseDown === true) {
      getPosition(e, canvas)
    }
  }
  function mouseDown (e) {
    e.preventDefault();
    // 表示当前鼠标被按下
    isMouseDown = true;
    getPosition(e, canvas)
  }
  function mouseUp(e) {
    e.preventDefault();
    // 表示当前鼠标抬起
    isMouseDown = false;
  }
}

打开控制台,点击上面线框内区域

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress