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

Question

Я использую библиотеку easelJS с несколькими объектами 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 ALWAYS представляют точку начала для самого последнего объекта bitmapSequence, для которого я изменил атрибуты x и y до вызова stage.update ().

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

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

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

Answer 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])

Answer 2

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

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