Создайте событие mousemove для библиотеки canvas

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

Предполагая, что вы собираетесь каким-то образом добавить холст в дерево документа - в противном случае вам следует более подробно описать свою систему - вы можете просто передать список на холст:

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 для выдачи нужного события из физического холста на основе скопированного слоя - и это действительно более сложно.

Однако, это все ещетот же принцип: если вы не хотите, чтобы конечный пользователь добавил события на холст, вы должны сделать это самостоятельно в определенный момент.

Answer 2

Вы можете сделать что-то вроде этого:

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>