如何获取鼠标在 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);

检查这个 fiddle-> http://jsfiddle.net/x0bdq3aa/3/

这是获取相对于Canvas的鼠标坐标，getMousePos()方法returns鼠标坐标是根据客户端鼠标的位置和canvas 从 window 对象的 getBoundingClientRect() 方法获得。

Answer 2

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

奇怪的是，这个 easeljs tutorial 明确表示您可以像刚才那样使用 'mouseup' 事件。

但是，当您查看有关 events attached to the Stage class and the ones attached to the DisplayObject class 的文档时，没有提及此 'mouseup'。

关于 'pressup' 事件：

After a mousedown occurs on a display object, a pressup event will be generated on that object when that mouse press is released. This can be useful for dragging and similar operations.

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>

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

How to get the first and last position of a mouse on object in HTML5 Canvas?

html

javascript

canvas

easeljs