DRAWING AND MOVING IMAGES

Transcription

1 DRAWING AND MOVING IMAGES Moving images and shapes in a Visual Basic application simply requires the user of a Timer that changes the x- and y-positions every time the Timer ticks. In our first example, we will look at how to move a simple shape. MOVING SHAPES To move a shape, the first thing we will do is draw a circle when the form loads and the user clicks anywhere in the form. Let s start by creating a simple form with two buttons (btnstart and btnstop) and a Timer called tmrtimer. Now let s create a few variables that we re going to need for this program: Public Class MovingBall Private g As Graphics Private mybrush As SolidBrush Private xpos, ypos As Integer Private start As Boolean End Class Drawing and Moving Images Page 1 of 7

2 We will obviously need a Graphics object and a SolidBrush object so that we can draw our shape. What we re also going to need are two variables to keep track of the x-position and the y-position of the shape that we will be drawing. Finally, we will need a Boolean variable to determine when we want the shape to be drawn. I ve called the Boolean start. Let s now add some code that will set the initial values of our variables: Private Sub MovingBall_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load g = Me.CreateGraphics() mybrush = New SolidBrush(Color.CadetBlue) xpos = 0 ypos = 0 start = False btnstart.enabled = False btnstop.enabled = False When the form loads, I simply want to set the x- and y-positions to 0 by default and set my Boolean variable start to false because I m not going to want to draw anything until the user clicks the form. Now let s do something when the user clicks the form with the mouse: Private Sub MovingBall_MouseClick(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles Me.MouseClick xpos = e.x ypos = e.y start = True btnstart.enabled = True When the user clicks on the form, we re simply going to set the x- and y-position to the x- and y-position of the mouse cursor. We will also set our start variable to true and refresh the screen so that the program can go to the Paint() method where we will have the code we need to draw our shape. Private Sub MovingBall_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles Me.Paint If start = True Then g.fillellipse(mybrush, xpos, ypos, 75, 75) Drawing and Moving Images Page 2 of 7

3 In our Paint() method we are going to draw a simple circle 75 pixels wide and 75 pixels high at the x- and y-positions that are set when the user clicks the form. Right now when you run the program, a circle should be drawn wherever the user clicks on the form: Now let s get the circle moving when the user clicks the START button. For this to happen, all we need to do is simply start our timer: Private Sub btnstart_click(byval sender As System.Object, ByVal e As System.EventArgs) Handles btnstart.click btnstart.enabled = False btnstop.enabled = True tmrtimer.start() You ll notice I also disabled the START button and enabled the STOP button. The reason for this is because I don t want the user to click START while the object is already moving. While we re dealing with the starting of the timer we might as well write the code for our STOP button, which will simply stop the timer and thus stop the circle from moving: Private Sub btnstop_click(byval sender As System.Object, ByVal e As System.EventArgs) Handles btnstop.click btnstop.enabled = False Drawing and Moving Images Page 3 of 7

4 btnstart.enabled = True tmrtimer.stop() Our final step is writing code for our Timer object. The only thing we need to do here is increase the x- position and the y-position by whatever number of pixels we want and refresh the screen: Private Sub tmrtimer_tick(byval sender As System.Object, ByVal e As System.EventArgs) Handles tmrtimer.tick xpos += 5 ypos += 5 That s it! Now when you run the program, the circle will start moving diagonally once you click the form and click the START button. The shape will stop moving when the user clicks STOP because this will stop the timer. DRAWING AND MOVING AN IMAGE To move an image is exactly the same thing, the only difference is that instead of drawing a shape you need to draw an image. Drawing an image in Visual Basic is very simple. The first thing you need is an image which you will need to declare. For this example, I will declare an image and call it imggreenlantern: Private imggreenlantern As Image When the form loads, initialize your Image object by getting the file: imggreenlantern = Image.FromFile(Directory.GetCurrentDirectory() & "\images\green_lantern.png") Remember to import System.IO so that you can use the Directory class and retrieve the picture file from the default directory. Now you will need to replace the FillEllipse() method that we used in the Paint() method with DrawImage(). There are a number of ways that you can use the DrawImage() method in Visual Basic. The following are a list of some of the common ways that DrawImage() is used: METHOD DrawImage(Image, Int32, Int32) DESCRIPTION Draws the specified image, using its original physical size, at the location specified by a coordinate pair. Drawing and Moving Images Page 4 of 7

5 DrawImage(Image, Int32, Int32, Int32, Int32) DrawImage(Image, Int32, Int32, Rectangle, GraphicsUnit) DrawImage(Image, Point) Draws the specified Image at the specified location and with the specified size. Draws a portion of an image at a specified location. Draws the specified Image, using its original physical size, at the specified location. Replace the code you have in the Paint() method with the following code to draw an image: Private Sub MovingBall_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles Me.Paint If start = True Then g.drawimage(imggreenlantern, xpos, ypos, imggreenlantern.width, imggreenlantern.height) Now when you run the program, you will see an image moving diagonally across the screen instead of a circle. Drawing and Moving Images Page 5 of 7

6 CHECKING IF AN OBJECT IS OFF THE SCREEN You ll notice that as the image continues to move, eventually it goes off the screen. If you don t want an image to go off the screen or you want something to happen when an image goes off the screen, you need to write code that first checks where the image is and then does something when it reaches a certain point. Let s start by checking if the image goes off the screen on the right. To do this, we need to write code in our Timer that checks the position of the image every time the Timer ticks. The code would look something like this: Private Sub tmrtimer_tick(byval sender As System.Object, ByVal e As System.EventArgs) Handles tmrtimer.tick xpos += 5 ypos += 5 If xpos > Me.Width Then xpos = -imggreenlantern.width Now when you run the program, you ll notice that the image goes back to the right side of the screen and gradually reappears when it goes off the screen to the right. Let s do the same thing for when the image goes off the screen at the bottom, in which case we want to move it back to the top: Private Sub tmrtimer_tick(byval sender As System.Object, ByVal e As System.EventArgs) Handles tmrtimer.tick xpos += 5 ypos += 5 If xpos > Me.Width Then xpos = -imggreenlantern.width If ypos > Me.Height Then ypos = -imggreenlantern.height Drawing and Moving Images Page 6 of 7

7 Now when the image goes off the screen at the bottom or on the right, it will return back. Drawing and Moving Images Page 7 of 7