Масштабирование и вращение с различным происхождением - PullRequest
Новая
       37

Масштабирование и вращение с различным происхождением

0 голосов
/ 30 мая 2019

Я пишу игру в объекте html5 canvas и пытаюсь применить преобразования к изображению "карты" игры.Как мне масштабировать изображение с другим источником, чем я поворачиваю его?

Я пробовал разные порядки преобразований, но мог только получить вращение или масштабирование, чтобы правильно использовать их соответствующие источники одновременно.Я также пытался использовать setTransform, но похоже, что он работает только с одним источником одновременно.Последний подход, который я выбрал, состоял в том, чтобы вручную получить смещения из-за поворота вокруг точки и масштабирования вокруг точки и применить их к преобразованиям, но это тоже не сработало.

Вот основной код для рисования длякарта / сетка: 

        // get context of tmp canvas
        var tmp_ctx = pre_grid_canvas.getContext("2d");

        // translate
        tmp_ctx.translate(grid.transform.x, grid.transform.y);

        // rotate
        tmp_ctx.translate(grid.rot_origin[0], grid.rot_origin[1]);
        tmp_ctx.rotate(grid.transform.ang * Math.PI / 180 * -1);
        tmp_ctx.translate(-grid.rot_origin[0], -grid.rot_origin[1]);

        // scale
        tmp_ctx.translate(grid.scale_origin[0], grid.scale_origin[1]);
        tmp_ctx.scale(grid.transform.sx, grid.transform.sy);
        tmp_ctx.translate(-grid.scale_origin[0], -grid.scale_origin[1]);

        // draw transformed canvas into the old canvas
        tmp_ctx.drawImage(grid.scene.canvas, 0, 0);

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

Текущее поведение: демо (клавиши alt + стрелка для поворота, прокрутка для увеличения)

...