WedX - журнал о программировании и компьютерных науках

Что определяет исходную точку для context.fillRect на холсте HTML5 при использовании 2D-контекста?

Я использую библиотеку boostJS с несколькими объектами bitmapSequence на моем холсте. Я могу задать неправильный вопрос, потому что я не понимаю, как это работает. Постараюсь максимально понятно объяснить свою ситуацию.

Я помещаю несколько объектов bitmapSequence (последовательности анимации спрайтов) на холст и перемещаю их внутри глобальной функции tick(), устанавливая свойства x и y. Как только я установил их свойства x и y, я вызываю stage.update(), который повторно отображает холст и все объекты bitmapSequence с их новыми местоположениями.

После вызова stage.update(), но все еще внутри функции tick(), я присваиваю переменной ctx значение canvas.getContext('2d'). Затем я вызываю ctx.fillRect(0, 0, 8, 8). В этом случае аргументы 0,0 (x, y) для fillRect ВСЕГДА представляют исходную точку для самого последнего объекта bitmapSequence, атрибуты x и y которого я изменил до вызова stage.update().

Это означает, что если я нарисую прямоугольник в точке 0,0, он будет отображаться в начале координат самого последнего объекта bitmapSequence, который я использовал, и будет следовать за bitmapSequence при его перемещении).

Если я попытаюсь получить 2D-контекст и нарисовать прямоугольник до stage.update(), он не появится на холсте.

В идеале я хотел бы иметь возможность рисовать прямоугольники относительно источника любого объекта bitmapSequence, который я хочу. Пожалуйста, помогите мне понять, что я неправильно понимаю.

javascript canvas html html5-canvas
29.10.2011

Ответы:


1

Возможно, вы ищете функцию translate()? Поведение вашей программы соответствует поведению этой функции. Итак, если вы хотите сбросить относительный рисунок, используйте ctx.translate(-x_of_last_bitmapSequence, -y_of_last_bitmapSequence).

В качестве альтернативы вы можете изменить «начальную точку» относительного рисования:

ctx.save();
ctx.translate(x, y);

ctx.strokeRect(0, 0, 30, 30) // strokes a square at coords [x, y]

ctx.restore(); // restores the original state (relative coords are at [0, 0])
29.10.2011
  • Это оказалось тем, что мне было нужно, но проблема заключалась в том, что он все еще функционировал относительно финальной последовательности растровых изображений, которую я использовал. Мне не удалось заставить его работать должным образом по всем индексам в моем массиве bitmapSequence. 03.11.2011

    • 2

    Вместо этого я смог использовать объект Container в средеncelJS. Это позволило мне добавлять объекты в контейнер, и объекты внутри контейнера перемещались вместе с контейнером. Объекты внутри контейнера имели свои координаты x/y относительно контейнера, а контейнер имел координаты x/y относительно холста. Это сработало именно так, как я ожидал.

    Я до сих пор не знаю, что происходит с 2D-контекстом в сочетании с EaselJS.

    15.11.2011
    Новые материалы
    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..
    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
    Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
    Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..
    Учебные заметки: создание моего первого пакета Node.js
    Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..
    Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
    Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..
    Для любых предложений по сайту: [email protected]