Как правильно использовать холст HTML5 в классах JavaScript? - PullRequest
Новая
       4

Как правильно использовать холст HTML5 в классах JavaScript?

0 голосов
/ 08 февраля 2011

Во-первых, я использую термин "классы" для обозначения функций с прототипами, которые могут находиться в отдельном файле от основного файла инициализации для того, над чем я работаю.

Теперь на мой вопрос / вопрос: Я работаю над созданием чего-либо в JavaScript / HTML5 и пытаюсь запрограммировать это «должным образом» (т.е. используя прототипы с форматами, которые, я надеюсь, стандартны). В моем основном файле JavaScript у меня есть методы create, использующие экземпляр (в основном корневой экземпляр моего сценария на основе OOP / prototype), который устанавливает холст.

У меня также есть другой загруженный файл, который содержит «класс» для создания нажимаемых кнопок. На данный момент я просто пытаюсь заставить кнопки рисовать на холсте, однако я не могу получить доступ к экземпляру холста, потому что я считаю, что экземпляр находится вне области видимости (что нормально, я не хочу, чтобы все, что я делаю, содержало длинные точечные обозначения для ссылок на экземпляры). Однако, это доставляет мне проблемы, когда я пытаюсь нарисовать прямоугольник на холсте, учитывая, что «класс», в котором находится кнопка, не может ссылаться на контекст вне ее.

Я нашел способ обойти это, используя что-то вроде: 

function CreateButton(btn_x, btn_y, btn_width, btn_height, btn_txt) {

    // ... (check and define parameters)

    CreateButton.prototype.custom_canvas = document.getElementById('root_canvas');
    CreateButton.prototype.ctxt = this.custom_canvas.getContext('2d');

    CreateButton.prototype.ctxt.fillStyle = '#666666';
    CreateButton.prototype.ctxt.fillRect(this.x, this.y, this.width, this.height);
}

По сути, это надпись поверх холста с одноименным холстом? Я бы предположил, что впоследствии я все еще могу манипулировать обычным холстом, и он будет действовать так, как если бы это был один элемент холста. Я беспокоился, что перерисовка на холсте может занять много памяти при добавлении многих вещей, однако, независимо от метода, нельзя избежать записи поверх холста (даже в том же объеме).

Есть предложения или помощь? Или мой метод использования одного и того же холста в другом классе приемлем?

Спасибо за любые отзывы.

[UPDATE] Хм, может быть, я должен попробовать передать контекст в качестве параметра и просто использовать его.

... Или я должен просто сделать холст глобальным объектом? Есть предложения?

1 Ответ

1 голос
/ 08 февраля 2011

Полагаю, вы могли бы попытаться реализовать своего рода "WidgetManager", который сохраняет ссылку на canvas и ваши виджеты. Он будет использовать механизм обратного вызова для визуализации виджетов. Каждый виджет (т. Е. В данном случае Button) будет иметь определенный тип состояний рендеринга (нажатие, отпускание) и какое-то внутреннее состояние. Другие виджеты могут иметь более сложные состояния.

Обратите внимание, что "WidgetManager", вероятно, должен отслеживать виджет "z" и нажатия пользователя (какой виджет был нажат). Исходя из этого, он должен иметь возможность запускать обработчики, связанные с виджетами. Таким образом, вы должны заново изобрести то, что уже делают базовые библиотеки пользовательского интерфейса. :)

Я думаю, вам лучше отработать свой дизайн, прежде чем переходить к этапу реализации. Многое зависит от того, что вы действительно хотите с ним. :)

Обратите внимание, что вы можете упростить рендеринг и много проверять, используя несколько canvasii вместо одного. В этом случае вам придется иметь дело с z-индексом и абсолютным позиционированием, но, по крайней мере, вы сможете использовать некоторые из существующих вещей без необходимости реализовывать их самостоятельно.

...