Javascript 如何在Draw2D库中侦听画布上的鼠标事件?

Javascript 如何在Draw2D库中侦听画布上的鼠标事件?,javascript,javascript-framework,draw2d-js,Javascript,Javascript Framework,Draw2d Js,我想允许用户使用library在画布上绘制一个矩形。鼠标向下的画布位置将位于左上角,鼠标向上的画布位置应位于右下角。但是,我无法在画布上捕捉鼠标上下移动事件 下面是我正在尝试的代码,但没有输出: var canvas = new draw2d.Canvas("canvas-div"); var policy = new draw2d.policy.canvas.CanvasPolicy(); policy.onClick = function(canvas, mouseX, mouseY) {

我想允许用户使用library在画布上绘制一个矩形。鼠标向下的画布位置将位于左上角,鼠标向上的画布位置应位于右下角。但是,我无法在画布上捕捉鼠标上下移动事件

下面是我正在尝试的代码,但没有输出:

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

在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); }
);
参考: