Как мой подкласс canvas может обрабатывать события window.resize? - PullRequest
Новая
       19

Как мой подкласс canvas может обрабатывать события window.resize?

0 голосов
/ 11 февраля 2020

У меня есть класс-оболочка холста, который должен запускать некоторый код, когда его размер изменяется, чтобы он полностью отвечал требованиям. Конечно, HTMLCanvasElement не имеет события изменения размера; только окно делает. Мой код выглядит так: 

class CanvasThing {
    constructor(whichCanvas) {
        ...
    }
    handleResize() {
        this.recalculateStuff();
    }
}

var foo = new CanvasThing(document.getElementFromID("bar"));

Теперь я хотел бы поместить это в конструктор моего класса, чтобы все было автономно: 

window.addEventListener("resize", this.handleResize, false);

Но когда он вызывает handleResize, this установлено для окна, а не для экземпляра, поэтому handleResize() не будет работать, потому что не может получить доступ ни к одному из других методов в классе.

Хорошо, хорошо, я ' Я сделаю это на глобальном уровне после инициализации foo: 

window.addEventListener("resize", foo.handleResize, false);

Но все же this указывает на окно, поэтому нет простого способа получить доступ к экземпляру моего класса.

Конечно, я могу привязать это к окружающему коду, выполнив итерацию события resize для всех экземпляров класса на странице и запустив их события resize, но это выглядит не очень элегантно. Настройка таймера на постоянную работу, чтобы проверить, не изменился ли холст, кажется даже более.

Существует ли современный способ обработки такого рода вещей, чтобы сделать мой объект-обертку настолько автономным, как возможно

1 Ответ

0 голосов
/ 11 февраля 2020

Благодаря комментарию tmdesigned; .bind - это путь к go: 

class CanvasThing {
    constructor(whichCanvas) {
        this.boundResize = this.handleResize.bind(this);
        window.addEventListener("resize", this.boundResize, false);
        ...
    }
    handleResize() {
        this.recalculateStuff();
    }
}

Это позволяет оболочке быть полностью автономной и элегантной.

...