如何在HTML5画布上获得鼠标的第一个和最后一个位置

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

本文关键字：鼠标 第一个 位置 最后一个 HTML5      更新时间：2023-09-26

我在画布上画了一个条。
当用户点击工具条的任何位置时，我想要获得起始位置。然后，用户将鼠标拖动到任何位置并释放鼠标，我将获得最后一个位置。

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

这是我的代码。

<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/

您正在寻找的事件是'pressup'， 您可能还需要'mouseleave'和'mouseout'。

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

但是，当您查看有关附加到Stage类和附加到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>

检查此代码一次，这里您将连续获得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/

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

相关文章：