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

Question

I want to allow the user to draw a rectangle on the canvas with Draw2D library. The canvas location of mouse-down will be top-left and the canvas location of mouse-up should become the bottom right. However, I am unable to catch the mouse-up and mouse-down events on the canvas.

Here is the code I am trying, but there is no output:

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

Answer 1

In Draw2D-js you need always to extend Classes if you want to do something new. ( you are redefining method with the wrong way )

in your exemple you can create this:

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

and than use it like this:

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

another method is to use JQuery directly:

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

Reference:

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