如何旋转放置在Mapcontrol上的图像

Question

问题

我有一个跟踪地图上车辆的应用程序。但是我无法让小小的虫子朝着他们的运动方向旋转。基本上，所有这些都是侧身！啊!

代码

Image vehicleImage = new Image
{
  //Set image size and source
};
RenderTransform rotation= new RotateTransform{Angle = X};
vehicleImage.RenderTransfrom = rotation; 
_mainMap.Children.Add(vehicleImage);
MapControl.SetLocation(vehicleImage, _position);

放在地图上的图像似乎完全忽略了我尝试应用的任何角度。

Answer 1

要了解旋转没有生效的原因，让我们先来看看下面的图片，该图片取自Visual Studio中的 Live Visual Tree - < / p>

我使用Rectangle，但在您的情况下，您会在那里看到Image控件。当您将其插入MapControl.Children集合时，它将被一个名为MapOverlayPresenter的特殊元素包裹（如图所示）。

此MapOverlayPresenter是MapControl中的内部元素，令人惊讶的是，互联网上没有关于它究竟是什么的官方文档。我的猜测是，当您缩放或旋转地图时，此叠加层只需通过缩放或向相反方向旋转来响应，以保持子元素的原始大小和旋转，这会导致内部{{{ 1}}以某种方式迷路。

（来自作文的P.S。RotationAngle和RotationAngleInDegrees也没有效果。）

解决方案

解决这个问题的方法很简单 - 不要直接在Image上公开轮换转换，而是创建一个名为Image的{​​{1}}，它封装了这个UserControl及其转换，具有依赖属性，如ImageControl和Image，负责将信息传递给内部UriPath及其Angle属性。

Image XAML

CompositeTransform

ImageControl代码隐藏

<UserControl x:Class="App1.ImageControl" ...>
    <Image RenderTransformOrigin="0.5,0.5"
           Source="{x:Bind ConvertToBitmapImage(UriPath), Mode=OneWay}"
           Stretch="UniformToFill">
        <Image.RenderTransform>
            <CompositeTransform Rotation="{x:Bind Angle, Mode=OneWay}" />
        </Image.RenderTransform>
    </Image>
</UserControl>

如何使用此ImageControl

public string UriPath
{
    get => (string)GetValue(UriPathProperty);
    set => SetValue(UriPathProperty, value);
}
public static readonly DependencyProperty UriPathProperty = DependencyProperty.Register(
    "UriPath", typeof(string), typeof(ImageControl), new PropertyMetadata(default(string)));     

public double Angle
{
    get => (double)GetValue(AngleProperty);
    set => SetValue(AngleProperty, value);
}
public static readonly DependencyProperty AngleProperty = DependencyProperty.Register(
    "Angle", typeof(double), typeof(ImageControl), new PropertyMetadata(default(double)));

public BitmapImage ConvertToBitmapImage(string path) => new BitmapImage(new Uri(BaseUri, path));

<强>结果

希望这有帮助！