如何在 Draw2D 库中监听画布上的鼠标事件？

【问题标题】：How to listen to mouse events on canvas in Draw2D library?如何在 Draw2D 库中监听画布上的鼠标事件？
【发布时间】：2014-01-17 10:48:57
【问题描述】：

我想让用户使用Draw2D 库在画布上绘制一个矩形。 mouse-down 的画布位置将是左上角，mouse-up 的画布位置应该是右下角。但是，我无法捕捉画布上的鼠标向上和鼠标向下事件。

这是我正在尝试的代码，但没有输出：

var canvas = new draw2d.Canvas("canvas-div");
var policy = new draw2d.policy.canvas.CanvasPolicy();
policy.onClick = function(canvas, mouseX, mouseY) {
    console.log("Mouse click:" + mouseX + "," + mouseY);
}
canvas.installEditPolicy(policy);

【问题讨论】：

标签： javascript javascript-framework draw2d-js

【解决方案1】：

在 Draw2D-js 中，如果你想做一些新的事情，你总是需要扩展类。（你用错误的方式重新定义方法）

在您的示例中，您可以创建：

  var MyPolicy = draw2d.policy.canvas.CanvasPolicy.extend({
  NAME: 'MyPolicy',
  init: function() {
    this._super();
    alert("done");
  },
  onClick: function(the, mouseX, mouseY, shiftKey, ctrlKey) {
    this._super(the, mouseX, mouseY, shiftKey, ctrlKey);
    alert("MyPolicy click:" + mouseX + "," + mouseY);
  }
 });

而不是像这样使用它：

var policy = new MyPolicy();
canvas.installEditPolicy(policy);

另一种方法是直接使用JQuery：

$('#draw2Did').click(function(ev) { 
      alert("Mouse click:" + ev.clientX + "," +ev.clientY); }
);

参考：

http://draw2d.org/draw2d_touch/jsdoc_5/#!/api/draw2d.policy.canvas.CanvasPolicy

【讨论】：