更改 WPF 中 Canvas 的坐标系

我正在编写一个地图应用程序，它使用 Canvas 来定位元素。对于每个元素，我必须以编程方式将元素的纬度/经度转换为画布的坐标，然后设置 Canvas.Top 和 Canvas.Left 属性。

如果我有一个 360x180 画布，我可以将画布上的坐标转换为 X 轴上的 -180 到 180 而不是 0 到 360，以及 Y 轴上的 90 到 -90 而不是 0 到 180 吗？

缩放要求：

• 画布可以是任何尺寸，因此如果尺寸为 360x180 或 5000x100，则仍然可以使用。
• 纬度/经度区域可能并不总是 (-90,-180)x(90,180)，它可以是任何值（即 (5,-175)x(89,-174)）。
• PathGeometry 等基于点的元素，而不是基于 Canvas.Top/Left 的元素需要工作。

这是一个全 XAML 解决方案。嗯，主要是 XAML，因为您必须在代码中包含 IValueConverter。因此：创建一个新的 WPF 项目并向其添加一个类。该类是 MultiplyConverter：

namespace YourProject
{
    public class MultiplyConverter : System.Windows.Data.IValueConverter
    {
        public object Convert(object value, System.Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return AsDouble(value)* AsDouble(parameter);
        }
        double AsDouble(object value)
        {
            var valueText = value as string;
            if (valueText != null)
                return double.Parse(valueText);
            else
                return (double)value;
        }

        public object ConvertBack(object value, System.Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new System.NotSupportedException();
        }
    }
}

然后将此 XAML 用于您的窗口。现在您应该可以在 XAML 预览窗口中看到结果。

EDIT：您可以通过将您的画布放入另一个画布中来解决背景问题。有点奇怪，但它有效。此外，我还添加了一个 ScaleTransform，它可以翻转 Y 轴，使正 Y 向上，负 Y 向下。仔细注意哪些名称放在哪里：

<Canvas Name="canvas" Background="Moccasin">
    <Canvas Name="innerCanvas">
        <Canvas.RenderTransform>
            <TransformGroup>
                <TranslateTransform x:Name="translate">
                    <TranslateTransform.X>
                        <Binding ElementName="canvas" Path="ActualWidth"
                                Converter="{StaticResource multiplyConverter}" ConverterParameter="0.5" />
                    </TranslateTransform.X>
                    <TranslateTransform.Y>
                        <Binding ElementName="canvas" Path="ActualHeight"
                                Converter="{StaticResource multiplyConverter}" ConverterParameter="0.5" />
                    </TranslateTransform.Y>
                </TranslateTransform>
                <ScaleTransform ScaleX="1" ScaleY="-1" CenterX="{Binding ElementName=translate,Path=X}"
                        CenterY="{Binding ElementName=translate,Path=Y}" />
            </TransformGroup>
        </Canvas.RenderTransform>
        <Rectangle Canvas.Top="-50" Canvas.Left="-50" Height="100" Width="200" Fill="Blue" />
        <Rectangle Canvas.Top="0" Canvas.Left="0" Height="200" Width="100" Fill="Green" />
        <Rectangle Canvas.Top="-25" Canvas.Left="-25" Height="50" Width="50" Fill="HotPink" />
    </Canvas>
</Canvas>

至于您需要不同范围的新要求，更复杂的 ValueConverter 可能可以解决问题。