如何旋转放置在地图控件上的图像 [英] How to rotate image placed on a Mapcontrol

问题描述

问题

我有一个可以在地图上跟踪车辆的应用程序.但是，我无法让这些小家伙朝着它们运动的方向旋转.基本上，他们都在横着走！啊!

代码

Image VehicleImage = new Image{//设置图片大小和来源};RenderTransform 旋转 = 新 RotateTransform{Angle = X};VehicleImage.RenderTransfrom = 旋转；_mainMap.Children.Add(vehicleImage);MapControl.SetLocation(vehicleImage, _position);

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

解决方案

要了解为什么旋转没有生效，我们先来看看下图，它取自 Live Visual Tree 在 Visual Studio 中 -

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

这个 MapOverlayPresenter 是 MapControl 中的一个内部元素，令人惊讶的是，Internet 上没有关于它究竟是做什么的官方文档.我的猜测是，当您缩放或旋转地图时，此叠加层只是通过向相反方向缩放或旋转来响应，以保持子元素的原始大小和旋转，这会导致内部 图像不知何故迷路了.

(PS

希望这会有所帮助！

The issue

I've got an application that tracks vehicles on a map. However I cannot get the little buggers to rotate in the direction of their motion. Basically, all of them are going sideways! Ugh!

The code

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

The Image, placed on the map, seems to completely ignore any angle I try to apply.

解决方案

To understand why the rotation doesn't take effect, let's first take a look at the image below, which is taken from the Live Visual Tree in Visual Studio -

I use a Rectangle but in your case, you will see your Image control there instead. When you insert it into the MapControl.Children collection, it will be wrapped with a special element called MapOverlayPresenter (as shown in the picture).

This MapOverlayPresenter is an internal element within MapControl and surprisingly, there's no official documentation on the Internet on what exactly it does. My guess is, as you zoom or rotate the map, this overlay simply responds by zooming or rotating in the opposite direction in order to maintain the original size and rotation of the child element, and this is causing the rotation transform of your inner Image to somehow get lost.

(P.S. RotationAngle and RotationAngleInDegrees from Composition have no effect here either.)

---

Solution

The way to work around this is simple - instead of exposing the rotation transform on the Image directly, create a UserControl called ImageControl which encapsulates this Image and its transform, with dependency properties like UriPath and Angle that are responsible for passing the information down to the inner Image and its CompositeTransform property.

The ImageControl XAML

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

The ImageControl code-behind

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

How to use this ImageControl

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

_mainMap.Children.Add(vehicleImage);

Outcome

Hope this helps!

这篇关于如何旋转放置在地图控件上的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！