缩放平铺网格

Question

我正在开发自己的 tile bliting 引擎，这个引擎使用的是六边形 tile - 但我认为它与常规 tile 没有太大区别。

我有巨大的 x,y 瓷砖数组，它们有用于在画布上渲染的 x,y 坐标，我只迭代在当前相机位置上应该在画布上可见的那些。

所以我坚持缩放并且无法自己解决这个问题。 这是我在画布上绘制图块的代码：

public function draw():Void{
    clearCanvas(); //Clear canvas (bitmapData)
            var _m:Matrix;
            iterateTiles(function(_tile:HexTile):Void{ // loop every tile that is visible on screen
                _m = new Matrix();
                _m.translate(_tile.x + cameraPoint.x,_tile.y  + cameraPoint.y);//Get pre calculated tile x,y and add camera x,y
                _m.scale(matrixScale, matrixScale);
                drawToCanvas(_tile,_m);//Send to draw tile on canvas using Matrix
            },true);
        }

这很好用而且速度很快，但唯一的问题是它从左上角缩放图块（就像常规缩放一样）

Before scale

---

After scale

我的问题是如何将图块转换为始终从中心缩放。因此，如果 tile 10:10 在缩放之前位于屏幕中心，那么它应该 缩放后留在那里。

Answer 1

对不起，我误解了这个问题，但我想我现在明白了：

// Scale the distance from the original point to the center of the canvas
var xDistance:Number = ((_tile.x + cameraPoint.x) - xCenter) * matrixScale;
var yDistance:Number = ((_tile.y + cameraPoint.y) - yCenter) * matrixScale;

// Add the distances to the center of the canvas. This is where you want the tile 
// to appear.
var x:Number = xCenter + xDistance;
var y:Number = yCenter + yDistance;

// Because the coordinate is going to be scaled, you need to increase it first.
x = (1 / matrixScale) * x;
y = (1 / matrixScale) * y;

_m.translate(x, y);

我没有测试过这个，我只是在方格纸上画出来的。让我知道它是否有效。