locked
Problems with rotating an object and detecting when the object moves off screen

    Question

  • I am trying to move and rotate an image on the screen in a Windows Store App in VB2013.

    1. I can get it to move fine but if it has too much inertia it goes off the screen. The WPF example everyone points to does not work in VB2013 windows store apps so I figured out the following code on my own by trial and error. I pasted in the off screen detection from the code example but it creates errors but I figured it would give me a starting point.

    2. I seem to have a problem with my rotation. The object does not rotate about it's center but the upper left corner. It also seems to rotate in the opposite direction intended.

    Here is the code I am using.

    Public NotInheritable Class MainPage
        Inherits Page
        Public MoveTile As New TranslateTransform
        Public RotateTile As New RotateTransform
        Public ImageTransform As New TransformGroup
        Sub Main()
        End Sub
        Private Sub imgPlayerTile_ManipulationDelta(sender As Object, e As ManipulationDeltaRoutedEventArgs) Handles imgPlayerTile.ManipulationDelta
            RotateTile.Angle = RotateTile.Angle + e.Delta.Rotation
            MoveTile.X = MoveTile.X + e.Delta.Translation.X
            MoveTile.Y = MoveTile.Y + e.Delta.Translation.Y
            ImageTransform.Children.Clear()
            ImageTransform.Children.Add(RotateTile)
            ImageTransform.Children.Add(MoveTile)
            imgPlayerTile.RenderTransform = ImageTransform
            'The following lines are pasted from the WPF example but cause errors here
            'If e.IsInertial AndAlso Not containingRect.Contains(shapeBounds) Then
            '    e.Complete()
            'End If
            e.Handled = True
        End Sub
    End Class

    and the XAML

                    

    x:Class="ProjectName.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:ProjectName"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    <Viewbox HorizontalAlignment="Left" Height="1080" VerticalAlignment="Top" Width="1920">
            <Canvas x:Name="cnvGameBoard" Height="1080" Width="1920" Background="Blue">
     <Image x:Name="imgPlayerTile" Height="100" Canvas.Left="874" Canvas.Top="940" Width="100" Source="Assets/CT01.jpg" ManipulationMode="All" RenderTransformOrigin="0,0">
                    <Image.Projection>
                        <PlaneProjection CenterOfRotationX="75" CenterOfRotationY="75" CenterOfRotationZ="75"/>
                    </Image.Projection>
                </Image>
            </Canvas>

        </Viewbox>

    Please tell me where I am going wrong with the rotation and how to stop my image from flying off the screen! Thanks.



    Wednesday, July 16, 2014 4:21 AM

Answers

  • Hi StrangeQuark5408,

    To answer your first question, how to stop the image from flying off the screen.

    -> You should be able to know the current window edge by Bounds property. You may need do some calculation to prevent your image fly out the screen, maybe stay at the edge of the window.

    I seem to have a problem with my rotation. The object does not rotate about it's center but the upper left corner. It also seems to rotate in the opposite direction intended.

    -> Try to add RenderTransformOrigin="0.5,0.5" in your image control, the default center is upper left corner.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Wednesday, July 16, 2014 6:38 AM
    Moderator
  • You may need calculate it by yourself. Let's say we have following values:

    1. your image center position (x1,y1)
    2. your image size (h,w)
    3. your screen size (x2,y2)

    You can determine if your image is out of the screen. For instance if (x1+1/2w)>x2, probably your image is out of bound.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Friday, July 25, 2014 10:00 AM
    Moderator

All replies

  • Hi StrangeQuark5408,

    To answer your first question, how to stop the image from flying off the screen.

    -> You should be able to know the current window edge by Bounds property. You may need do some calculation to prevent your image fly out the screen, maybe stay at the edge of the window.

    I seem to have a problem with my rotation. The object does not rotate about it's center but the upper left corner. It also seems to rotate in the opposite direction intended.

    -> Try to add RenderTransformOrigin="0.5,0.5" in your image control, the default center is upper left corner.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Wednesday, July 16, 2014 6:38 AM
    Moderator
  • Thanks for the info. Figured out how to set the RenderTransformOrigin point so my rotation is working great, but how do I get the current screen position of my image to compare it to the current window bounds?
    Thursday, July 17, 2014 6:22 AM
  • You may need calculate it by yourself. Let's say we have following values:

    1. your image center position (x1,y1)
    2. your image size (h,w)
    3. your screen size (x2,y2)

    You can determine if your image is out of the screen. For instance if (x1+1/2w)>x2, probably your image is out of bound.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Friday, July 25, 2014 10:00 AM
    Moderator