Question

我正在使用画布库，并且具有以下课程：

export default class Layer {

constructor(ypcanvas) {
    this.ypcanvas = ypcanvas;
    this.container = ypcanvas.container;
    this.can = document.createElement("canvas");
    this.ctx = this.can.getContext("2d");
}}

（这只是Layer类的摘录）

您可以导入该类，然后创建一个新的图层，如下所示：

let layer = new Layer(ypcanvas);

我该如何完成以下活动：

layer.on('mouseout', function () { });

或

layer.mousedown(function () { })

或类似的东西，这样我的库用户就可以调用该事件，而不必在图层画布上添加EventListener。

提前谢谢。

Answer 1

您可以执行以下操作：

class MyLibClass {

  constructor(elementId) {
    this.elementId = elementId
  }

  mouseDown(callback) {
    document.getElementById(this.elementId).addEventListener("mousedown", callback)  
  }

}
new MyLibClass("lib").mouseDown(() => alert("hey"))

#lib {
  width: 100px;
  height: 100px;
  background: blue;
}

<div id="lib"></div>

Answer 2

假设您要以某种方式将画布添加到文档树中–否则，您应该在系统中详细描述–您可以将列表器代理到画布：

export default class Layer {

 constructor(ypcanvas) {
    this.ypcanvas = ypcanvas;
    this.container = ypcanvas.container;
    this.can = document.createElement("canvas");
    this.ctx = this.can.getContext("2d");
  }

  on(type, lister) {
    this.can.addEventListener(type, lister);
  }

  off(type,lister) {
    this.can.removeEventListener(type, lister);
  }
}

如果相反，它只是一个内存画布，则必须实现一个坐标系统和z-index才能基于复制的图层从物理画布发出正确的事件，这确实更加复杂。

但是，它仍然是相同的原理：如果您不希望最终用户将事件添加到画布，则必须在特定位置自己完成。

为画布库创建mousemove事件

2 个答案: