如何旋转放置在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 -

我使用了一个Rectangle但是在你的情况下,你会看到你的Image控制权.当您将其插入MapControl.Children集合时,它将被一个名为的特殊元素包裹MapOverlayPresenter(如图所示).

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

(PS RotationAngle和RotationAngleInDegrees来自Composition也没有效果.)

解

解决这个问题的方法很简单-而不是暴露在旋转变换的Image直接,创建一个UserControl名为ImageControl它封装了这个Image及其变换,与依赖属性像UriPath和Angle,负责传递信息到内部Image及其CompositeTransform财产.

该ImageControlXAML

<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));

怎么用这个 ImageControl

var vehicleImage = new ImageControl
{
    Width = 80,
    UriPath = "/Assets/car.png",
    Angle = 45
};

_mainMap.Children.Add(vehicleImage);

结果

希望这可以帮助!