Search code examples
wpfvb.netxamlrotationmatrix-transform

MatrixTransform rotate then translate image in xaml


I'm trying to rotate then translate an image with the simple Matrix.translate and Matrix.rotate methods, but for some reason when it's rotated 90º or 270º, if I try to translate it even an inch it spins out of control and away from the center. And if it's 180º it shoots out in the opposite direction.

The xaml for the image is like so:

<Border x:Name="Border" Grid.Row="0" MinHeight="100" MinWidth="100" VerticalAlignment="Center" HorizontalAlignment="Center" ClipToBounds="True"  BorderBrush="Black" BorderThickness="1" >
     <Image x:Name="imgImagem" MaxHeight="550" MaxWidth="950"
          Margin="10,10,10,10"  MouseWheel="imgImagem_MouseWheel"
          MouseLeftButtonDown="imgImagem_MouseLeftButtonDown" 
      />    
</Border>

For the rotation:

Private Sub imgImagem_MouseRightButtonDown(sender As Object, e As MouseButtonEventArgs) Handles imgImagem.MouseRightButtonDown
        Dim m As Matrix = imgImagem.RenderTransform.Value
        m.RotateAt(90, imgImagem.ActualWidth / 2, imgImagem.ActualHeight / 2)
        imgImagem.RenderTransform = New MatrixTransform(m)
End Sub

And for the translation:

    Private Sub imgImagem_MouseLeftButtonDown(sender As Object, e As MouseButtonEventArgs)

        If imgImagem.IsMouseCaptured Then
            Return
        End If
        imgImagem.CaptureMouse()
        start = e.GetPosition(imgImagem)
        origin.X = imgImagem.RenderTransform.Value.OffsetX
        origin.Y = imgImagem.RenderTransform.Value.OffsetY

    End Sub

    Private Sub imgImagem_MouseLeftButtonUp(sender As Object, e As MouseButtonEventArgs) Handles imgImagem.MouseLeftButtonUp
        imgImagem.ReleaseMouseCapture()
    End Sub

    Private Sub imgImagem_MouseMove(sender As Object, e As Input.MouseEventArgs) Handles imgImagem.MouseMove
        Dim m As Matrix = imgImagem.RenderTransform.Value

        If Not imgImagem.IsMouseCaptured Then
            Return
        End If
        Dim p As Point = e.MouseDevice.GetPosition(imgImagem)
        m.Translate((p.X - start.X), (p.Y - start.Y))

        imgImagem.RenderTransform = New MatrixTransform(m)
    End Sub

Any clues on what's making it spin out and such or what am I doing wrong for it to present such behavior?


Solution

  • Just had to differentiate the translation depending on the angle like so:

            x = p.X - start.X
            y = p.Y - start.Y
    
            Select Case angulo
                Case 0
                    m.Translate(x, y)
                Case 90
                    m.Translate(-y, x)
                Case 180
                    m.Translate(-x, -y)
                Case 270
                    m.Translate(y, -x)
            End Select