如何在HTML5 Canvas中的对象上获得鼠标的第一个和最后一个位置？

Question

我在Canvas中画了一个酒吧。
当用户单击栏中的任意位置时，我想获得开始位置。 然后，用户将鼠标拖动到任何位置并释放鼠标，我将获得最后一个位置。

我这样做已经有一段时间了，但是我没有得到正确的事件。

这是我的代码。

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

var stage = new createjs.Stage("demoCanvas");

var rect = new createjs.Shape();
rect.graphics.beginFill("#000").drawRect(0, 20, 200, 50);

rect.on('mousedown', function (mousedownEvent) {
    var startX = mousedownEvent.rawX;
    console.log('mousedown');
});

rect.on('mouseup', function(mouseupEvent) {
   var stopX = mouseupEvent.rawX;
    console.log('mouseup');
    console.log(stopX);
});

stage.addChild(rect);
stage.update();

http://jsfiddle.net/noppanit/x0bdq3aa/

Answer 1

一次检查此代码，在这里您将连续获得x和y位置。

  function writeMessage(canvas, message) {
    var context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.font = '18pt Calibri';
    context.fillStyle = 'white';
    context.fillText(message, 10, 25);
  }
  function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();


    return {
      x: evt.clientX - rect.left,
      y: evt.clientY - rect.top
    };
  }
  var canvas = document.getElementById('demoCanvas');
  var context = canvas.getContext('2d');

  canvas.addEventListener('mousemove', function(evt) {
    var mousePos = getMousePos(canvas, evt);
    var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
    writeMessage(canvas, message);
  }, false);

检查这个小提琴-> http://jsfiddle.net/x0bdq3aa/3/

这是为了获得相对于Canvas，getMousePos（）方法的鼠标坐标，该方法根据客户端鼠标的位置和从窗口对象的getBoundingClientRect（）方法获得的画布的位置返回鼠标坐标。

Answer 2

您要查找的事件是'pressup' ， _{您可能还需要'mouseleave'和'mouseout' 。}

奇怪的是，这个easyljs教程明确指出，您可以像刚才那样使用'mouseup'事件。

但是，当您查看有关'mouseup' 到Stage类的事件和'mouseup'到DisplayObject类的 事件的文档时，没有提到此'mouseup' 。

关于'pressup'事件：

在显示对象上按下鼠标后，在释放该鼠标按下时将在该对象上生成按下事件。 这对于拖动和类似操作很有用。

 var stage = new createjs.Stage("demoCanvas"); var rect = new createjs.Shape(); rect.graphics.beginFill("#000").drawRect(0, 20, 200, 50); rect.on('mousedown', function (mousedownEvent) { var startX = mousedownEvent.rawX; snippet.log('mousedown'); }); rect.on('pressup', function(mouseupEvent) { var stopX = mouseupEvent.rawX; snippet.log('mouseup'); snippet.log(stopX); }); stage.addChild(rect); stage.update(); 

 <script src="https://code.createjs.com/easeljs-0.8.1.min.js"></script> <!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script> <canvas id="demoCanvas" width="500" height="70"></canvas>