Rotate Point Images

2 posts, 1 answers
  1. Esther
    Esther avatar
    13 posts
    Member since:
    Jun 2010

    Posted 21 Feb 2011 Link to this post

    Hello everybody,
    I have a map with several Pinpoints on it. I want to rotate each pinpoint image acording to a variable value.
    If I do a rotate tranform this way:
    Me.pinPoint.RenderTransform = New RotateTransform(degrees,0,0)
    the image is correctly rotated but I loose the position on the map. When I do zoom the center of the point is different for each level of zoom.
    I´ve tried asociating a hotSpot but the problem persists.
    Do you know a way to solve that??
    Thank you very much,
  2. Answer
    Andrey avatar
    1681 posts

    Posted 24 Feb 2011 Link to this post

    Hello Esther,

    You can use RotateTransform, but you must perform some additional calculation to change hotspot correspondently to the rotation angle. Since X and Y axis of the rotated pushpin will be rotated as well, then using of the Fraction type of the hotspot will give wrong results. You should use Pixel type and calculate pixel shift depends on the rotation angle. For default pushpin template the calculations could looks like the following:

    Partial Public Class MainPage
        Inherits UserControl
        Public Sub New()
            Dim pinHeight As Double = 40
            Dim pinWidth As Double = 25
            Dim angle As Double = 45
            Dim pin1 As Pushpin = New Pushpin()
            MapLayer.SetLocation(pin1, New Location(42.5, -99))
            Dim pin2 As Pushpin = New Pushpin()
            Dim rotate As RotateTransform = New RotateTransform()
            rotate.Angle = angle
            pin2.RenderTransform = rotate
            Dim hotspot As HotSpot = Me.CalculatePushpinHotspot(pinHeight, pinWidth, angle)
            MapLayer.SetHotSpot(pin2, hotspot)
            MapLayer.SetLocation(pin2, New Location(42.5, -99))
        End Sub
        ''' <summary>
        ''' Calculate hotspot for rotated pushpint.
        ''' </summary>
        ''' <param name="pinHeight">Height of the pushpint.</param>
        ''' <param name="pinWidth">Width of the pushpin.</param>
        ''' <param name="angle">Rotation angle in degrees.</param>
        ''' <returns>New hotspot.</returns>
        Private Function CalculatePushpinHotspot(ByVal pinHeight As Double, ByVal pinWidth As Double, ByVal angle As Double) As HotSpot
            Dim angleRad As Double = angle * Math.PI / 180D
            Dim halfWidth As Double = pinWidth / 2D
            Dim shiftX As Double = pinHeight * Math.Sin(angleRad) - halfWidth * Math.Cos(angleRad)
            Dim shiftY As Double = -(pinHeight * Math.Cos(angleRad) + halfWidth * Math.Sin(angleRad))
            Dim hotspot As HotSpot = New HotSpot()
            With hotspot
                .X = shiftX
                .XUnits = HotSpotUnit.Pixels
                .Y = shiftY
                .YUnits = HotSpotUnit.Pixels
            End With
            Return hotspot
        End Function
    End Class

    All the best,
    Andrey Murzov
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
Back to Top