Question

我正在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），但是它可以完美地缩放（到中心），并且错误地旋转到其预先转换的原点（至少看起来就是这样）。

当前行为：demo（按住Alt +箭头键可转动，滚动可缩放）

缩放和旋转具有不同的原点

0 个答案: