C# 開發 WPF/Silverlight 動畫與遊戲系列教程（十）斜度 α 地圖構造與算法（三）—— 座標轉換核心算法與菱形渲染

核心座標轉換算法

// 視窗座標系 → 遊戲座標系（縮小）
private Point getGamePosition(double x, double y) {
    return new Point(
        (int)((y + (x / 1.732)) / GridSize),
        (int)((y - (x / 1.732)) / GridSize)
    );
}

// 遊戲座標系 → 視窗座標系（放大）
private Point getWindowPosition(double x, double y) {
    return new Point(
        (x - y) * 0.886 * GridSize,
        (x + y) * 0.5 * GridSize
    );
}

預計算 sin60=1.732、cos60=0.5、(sin60)/2=0.886。地圖 α 固定，預計算三角函數提升效能。

菱形障礙物渲染

for (int x = 10; x < 20; x++)
    for (int y = 1; y < 10; y++) {
        Matrix[x, y] = 0;
        rect = new Rectangle();
        TransformGroup transformGroup = new TransformGroup();
        SkewTransform skewTransform = new SkewTransform(-10, -25);
        RotateTransform rotateTransform = new RotateTransform(54);
        transformGroup.Children.Add(skewTransform);
        transformGroup.Children.Add(rotateTransform);
        rect.RenderTransform = transformGroup;
        rect.Fill = new SolidColorBrush(Colors.GreenYellow);
        rect.Opacity = 0.3;
        rect.Stroke = new SolidColorBrush(Colors.Gray);
        rect.Width = GridSize;
        rect.Height = GridSize + 2;
        Carrier.Children.Add(rect);
        Point p = getWindowPosition(x, y);
        Canvas.SetLeft(rect, p.X);
        Canvas.SetTop(rect, p.Y);
    }

用 SkewTransform、RotateTransform 組合將方形渲染為菱形視覺效果，座標以 getWindowPosition 定位。