[2008] Drawing and rotating some transparent images

[NeoDement]

I expected this to be really easy but was sorely disappointed.

My first attempt was PictureBox controls and of course that turned out horribly


Then I realised it didn't support arbitary rotations anyway so I gave up on it.

Then I found out all about painting stuff to forms so I tried that and it was all looking good

Until I rotated Head and found out that everything in the graphic control gets rotatated (even if I separate as shown in the code below)

Public Class AnimationPlayer




    'Arm, top. Front.
    Private Sub AnimationPlayer_Paint9(ByVal sender As Object, ByVal Part As System.Windows.Forms.PaintEventArgs) Handles Me.Paint
        Part.Graphics.DrawImage(Image.FromFile("C:\Documents and Settings\Ben\My Documents\Visual Studio 2005\Projects\FacewoundLauncher\Animation Editor\Animation Editor\Resources\TIFF\arm-t.tif"), 24, 60, 32, 16)
    End Sub

    'Arm, bottom. Front.
    Private Sub AnimationPlayer_Paint8(ByVal sender As Object, ByVal Part As System.Windows.Forms.PaintEventArgs) Handles Me.Paint
        Part.Graphics.DrawImage(Image.FromFile("C:\Documents and Settings\Ben\My Documents\Visual Studio 2005\Projects\FacewoundLauncher\Animation Editor\Animation Editor\Resources\TIFF\arm-b.tif"), 47, 60, 32, 16)
    End Sub

    'Head
    Private Sub AnimationPlayer_Paint7(ByVal sender As Object, ByVal Part As System.Windows.Forms.PaintEventArgs) Handles Me.Paint
        Part.Graphics.DrawImage(Image.FromFile("C:\Documents and Settings\Ben\My Documents\Visual Studio 2005\Projects\FacewoundLauncher\Animation Editor\Animation Editor\Resources\TIFF\head.tif"), 0, 0, 64, 64)
    End Sub

    'Body
    Private Sub AnimationPlayer_Paint6(ByVal sender As Object, ByVal Part As System.Windows.Forms.PaintEventArgs) Handles Me.Paint
        Part.Graphics.DrawImage(Image.FromFile("C:\Documents and Settings\Ben\My Documents\Visual Studio 2005\Projects\FacewoundLauncher\Animation Editor\Animation Editor\Resources\TIFF/body.tif"), 0, 30, 64, 64)
    End Sub

    'Leg, top. Rear.
    Private Sub AnimationPlayer_Paint5(ByVal sender As Object, ByVal Part As System.Windows.Forms.PaintEventArgs) Handles Me.Paint
        Part.Graphics.DrawImage(Image.FromFile("C:\Documents and Settings\Ben\My Documents\Visual Studio 2005\Projects\FacewoundLauncher\Animation Editor\Animation Editor\Resources\TIFF\leg-top-rear.tif"), 28, 80, 16, 32)
    End Sub

    'Leg, bottom. Front.
    Private Sub AnimationPlayer_Paint4(ByVal sender As Object, ByVal Part As System.Windows.Forms.PaintEventArgs) Handles Me.Paint
        Part.Graphics.DrawImage(Image.FromFile("C:\Documents and Settings\Ben\My Documents\Visual Studio 2005\Projects\FacewoundLauncher\Animation Editor\Animation Editor\Resources\TIFF\leg-bottom.tif"), 17, 105, 32, 32)
    End Sub

    'Leg, top. Front.
    Private Sub AnimationPlayer_Paint3(ByVal sender As Object, ByVal Part As System.Windows.Forms.PaintEventArgs) Handles Me.Paint
        Part.Graphics.DrawImage(Image.FromFile("C:\Documents and Settings\Ben\My Documents\Visual Studio 2005\Projects\FacewoundLauncher\Animation Editor\Animation Editor\Resources\TIFF\leg-top.tif"), 18, 80, 16, 32)
    End Sub

    'Leg, bottom. Rear.
    Private Sub AnimationPlayer_Paint2(ByVal sender As Object, ByVal Part As System.Windows.Forms.PaintEventArgs) Handles Me.Paint
        Part.Graphics.DrawImage(Image.FromFile("C:\Documents and Settings\Ben\My Documents\Visual Studio 2005\Projects\FacewoundLauncher\Animation Editor\Animation Editor\Resources\TIFF\leg-bottom-rear.tif"), 27, 105, 32, 32)
    End Sub

    'Arm, top. Rear.
    Private Sub AnimationPlayer_Paint1(ByVal sender As Object, ByVal Part As System.Windows.Forms.PaintEventArgs) Handles Me.Paint
        Part.Graphics.DrawImage(Image.FromFile("C:\Documents and Settings\Ben\My Documents\Visual Studio 2005\Projects\FacewoundLauncher\Animation Editor\Animation Editor\Resources\TIFF\arm-tr.tif"), 25, 60, 32, 16)
    End Sub

    'Arm, bottom. Rear.
    Private Sub AnimationPlayer_Paint(ByVal sender As Object, ByVal Part As System.Windows.Forms.PaintEventArgs) Handles Me.Paint
        Part.Graphics.DrawImage(Image.FromFile("C:\Documents and Settings\Ben\My Documents\Visual Studio 2005\Projects\FacewoundLauncher\Animation Editor\Animation Editor\Resources\TIFF\arm-br.tif"), 48, 60, 32, 16)
    End Sub

End Class

Great.

So I decide to try and make DirectX do it after reading some rather scary looking tutorials. However, DirectX doesn't show up for me as a Referenceable component and if I manually add it with Browse... I end up getting weird errors.

So never mind DirectX, using paint, how can I have multiple layers or specify the object to rotate?

(Or maybe you have an even easier way )

[jmcilhinney]

You should handle the Paint event of the control you want to draw on. One event handler only. You use the e.Graphics property to draw an image. You then call the RotateTransform method of the Graphics object and then draw another image. Only the second image will be rotated. I've only used RotateTransform once nd some time ago, so I can't remember the specifics. You should experiment a bit and see what you can come up with. I'm sure there are GDI+ tutorials that would cover it too.

[NeoDement]

You should handle the Paint event of the control you want to draw on. One event handler only. You use the e.Graphics property to draw an image. You then call the RotateTransform method of the Graphics object and then draw another image. Only the second image will be rotated. I've only used RotateTransform once nd some time ago, so I can't remember the specifics. You should experiment a bit and see what you can come up with. I'm sure there are GDI+ tutorials that would cover it too.

Well of course, that's what I originally tried before I made it complicated and separate. For some reason it rotates EVERY object drawn after the rotate command.

[NeoDement]

For example

Public Class AnimationPlayer



'Arm, top. Front.
Private Sub AnimationPlayer_Paint(ByVal sender As Object, ByVal Part As System.Windows.Forms.PaintEventArgs) Handles Me.Paint
Part.Graphics.RotateTransform(30)
Part.Graphics.DrawImage(Image.FromFile("C:\Documents and Settings\Ben\My Documents\Visual Studio 2005\Projects\FacewoundLauncher\Animation Editor\Animation Editor\Resources\TIFF\arm-t.tif"), 24, 60, 32, 16)

Part.Graphics.DrawImage(Image.FromFile("C:\Documents and Settings\Ben\My Documents\Visual Studio 2005\Projects\FacewoundLauncher\Animation Editor\Animation Editor\Resources\TIFF\arm-b.tif"), 47, 60, 32, 16)

Part.Graphics.DrawImage(Image.FromFile("C:\Documents and Settings\Ben\My Documents\Visual Studio 2005\Projects\FacewoundLauncher\Animation Editor\Animation Editor\Resources\TIFF\head.tif"), 0, 0, 64, 64)

Part.Graphics.DrawImage(Image.FromFile("C:\Documents and Settings\Ben\My Documents\Visual Studio 2005\Projects\FacewoundLauncher\Animation Editor\Animation Editor\Resources\TIFF/body.tif"), 0, 30, 64, 64)

Part.Graphics.DrawImage(Image.FromFile("C:\Documents and Settings\Ben\My Documents\Visual Studio 2005\Projects\FacewoundLauncher\Animation Editor\Animation Editor\Resources\TIFF\leg-top-rear.tif"), 28, 80, 16, 32)

Part.Graphics.DrawImage(Image.FromFile("C:\Documents and Settings\Ben\My Documents\Visual Studio 2005\Projects\FacewoundLauncher\Animation Editor\Animation Editor\Resources\TIFF\leg-bottom.tif"), 17, 105, 32, 32)

Part.Graphics.DrawImage(Image.FromFile("C:\Documents and Settings\Ben\My Documents\Visual Studio 2005\Projects\FacewoundLauncher\Animation Editor\Animation Editor\Resources\TIFF\leg-top.tif"), 18, 80, 16, 32)

Part.Graphics.DrawImage(Image.FromFile("C:\Documents and Settings\Ben\My Documents\Visual Studio 2005\Projects\FacewoundLauncher\Animation Editor\Animation Editor\Resources\TIFF\leg-bottom-rear.tif"), 27, 105, 32, 32)

Part.Graphics.DrawImage(Image.FromFile("C:\Documents and Settings\Ben\My Documents\Visual Studio 2005\Projects\FacewoundLauncher\Animation Editor\Animation Editor\Resources\TIFF\arm-tr.tif"), 25, 60, 32, 16)

Part.Graphics.DrawImage(Image.FromFile("C:\Documents and Settings\Ben\My Documents\Visual Studio 2005\Projects\FacewoundLauncher\Animation Editor\Animation Editor\Resources\TIFF\arm-br.tif"), 48, 60, 32, 16)
End Sub

End Class

Oh sorry guys I just rotated the entire thing.

[jmcilhinney]

Well of course, that's what I originally tried before I made it complicated and separate. For some reason it rotates EVERY object drawn after the rotate command.

That's what's supposed to happen. You're rotating the Graphics object with respect to the control it was created for, so everything drawn with that Graphics object will be rotated. That means that anything you don't want rotated you need to draw before calling RotateTransform. Alternatively you should call RotateTransform a second time to undo the rotation.

[NeoDement]

I want to rotate the pieces individually, I know that's what it's supposed to do. That's why I tried to seperate it which didn't work :|

Is there any good method for doing this?

[jmcilhinney]

Take a look at this code:

Private Sub Form1_Paint(ByVal sender As Object, _
                        ByVal e As PaintEventArgs) Handles Me.Paint
    Const X_ORIGIN As Integer = 100
    Const Y_ORIGIN As Integer = 100
    Const ANGLE As Integer = 45
 
    Dim startPoint As Point = Point.Empty
    Dim endPoint As New Point(0, 100)
 
    Dim g As Graphics = e.Graphics
 
    'Shift the origin of the Graphics object's coordinate system.
    g.TranslateTransform(X_ORIGIN, Y_ORIGIN)
 
    'Draw a vertical line.
    g.DrawLine(Pens.Black, startPoint, endPoint)
 
    'Rotate the Graphics object's coordinate system in the positive direction.
    g.RotateTransform(ANGLE)
 
    'Draw a vertical line.
    g.DrawLine(Pens.Red, startPoint, endPoint)
 
    'Reset the Graphics object's coordinate system.
    g.ResetTransform()
 
    'Shift the origin of the Graphics object's coordinate system.
    g.TranslateTransform(X_ORIGIN, Y_ORIGIN)
 
    'Rotate the Graphics object's coordinate system in the negative direction.
    g.RotateTransform(-ANGLE)
 
    'Draw a vertical line.
    g.DrawLine(Pens.Blue, startPoint, endPoint)
End Sub

Notice that I use the same coordinates for each line. Now take a look at the result:

[jmcilhinney]

If you don't understand how the above code works then try this. Visualise the Graphics object as a rectangle of infinite size in all directions with an origin at (0,0). That origin is at the top, left corner of the form's client area. The TranslateTransform method shifts the origin 100 pixels in the positive X direction, i.e. to the right, and 100 pixels in the positive Y direction, i.e. downwards. That's why when DrawLine is called and the point (0,0) is specified as the start point, i.e. Point.Empty, the line actually starts at (100,100) on the form.

Now, when you call RotateTransform the Graphics object's frame of reference is rotated 45 degrees in the clockwise direction. That's why, when you call DrawLine and specify the same start and end points, the line is rotated by 45 degress. Note that the rotation is about the origin of the Graphics object, which is located at the point (100,100) on the form.

The call to ResetTransform clears any transformations previously made to the Graphics object, so the translation and rotation are cleared. That means that you must then call TranslateTransform again before calling RotateTransform to rotate the same amount in the negative direction.

Note that instead of resetting the transform and having to translate again I could have just called RotateTransform and specified the angle as -90.

[NeoDement]

Sounds cool, I'll give it a whirl tomorrow. I'm tired. Thanks a lot for your effort.