如何在Draw2D庫中的畫布上偵聽鼠標事件？

Question

我想允許用戶使用Draw2D庫在畫布上繪制一個矩形。 鼠標向下的畫布位置將在左上方，而鼠標向上的畫布位置應在右下方。 但是，我無法捕獲畫布上的向上和向下鼠標事件。

這是我正在嘗試的代碼，但是沒有輸出：

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

在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