C# 開發 WPF/Silverlight 動畫與遊戲系列教程（十）斜度 α 地圖構造與算法（四）—— 滑鼠事件座標轉換整合

菱形障礙物視覺化

使用 SkewTransform + RotateTransform 組合模擬菱形視覺效果。

滑鼠事件座標轉換整合

在上節代碼基礎上，將滑鼠事件中的座標值透過 getGamePosition、getWindowPosition 互轉（修改 4 處，黃底標示）：

private void Carrier_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) {
    Point p = e.GetPosition(Carrier);
    Point start = getGamePosition(Canvas.GetLeft(Spirit) + SpiritCenterX, Canvas.GetTop(Spirit) + SpiritCenterY);
    Start = new System.Drawing.Point((int)start.X, (int)start.Y);
    Point end = getGamePosition(p.X, p.Y);
    End = new System.Drawing.Point((int)end.X, (int)end.Y);
    ......
    if (path == null) { MessageBox.Show("路徑不存在！"); }
    else {
        Point[] framePosition = new Point[path.Count];
        for (int i = path.Count - 1; i >= 0; i--)
            framePosition[path.Count - 1 - i] = getWindowPosition(path[i].X, path[i].Y);
        ......
        for (int i = path.Count - 1; i >= 0; i--) {
            rect = new Rectangle();
            rect.Fill = new SolidColorBrush(Colors.Snow);
            rect.Width = 4; rect.Height = 4;
            Carrier.Children.Add(rect);
            Point target = getWindowPosition(path[i].X, path[i].Y);
            Canvas.SetLeft(rect, target.X);
            Canvas.SetTop(rect, target.Y);
        }
    }
}

吸收上節內容後對比修改處可理解雙座標系在事件處理中的互轉應用。

斜度 60° 地圖構建成果圖。