Question

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

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

这是我的代码。

<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);

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

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

Answer 2

您要查找的内容为'pressup'，_{，您可能还需要'mouseleave'和'mouseout'。}

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

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

关于'pressup'活动：

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

＆＃13;

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();

＆＃13;

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

＆＃13;

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

2 个答案: