Upload
terry-yoast
View
659
Download
0
Tags:
Embed Size (px)
Citation preview
13-1
aslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhfaslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhfaslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhfaslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhfaslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhfaslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhfaslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhfaslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhfaslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhfaslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhfaslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhfaslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhfaslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhfaslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhfaslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhfaslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhfaslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhfaslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhfaslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhfaslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhfaslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhfaslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhfaslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhfaslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhf
Graphics, Animation, Sound, and Drag-and-Drop
Chapter 1313
McGraw-Hill © 2006 The McGraw-Hill Companies, Inc. All rights reserved.
13-3
Objectives (1 of 2)
Use Graphics methods to draw shapes, lines, and filled shapes
Create a drawing surface with a Graphics objectInstantiate Pen and Brush objects as needed for
drawingCreate animation by changing pictures at run timeCreate simple animation by moving images
13-4
Objectives (2 of 2)
Use the Timer component to automate animationUse scroll bars to move an imageAdd a sound player component to add sound to a
projectIncorporate drag-and-drop events into your programDraw a pie chart using the methods of the Graphics
object
13-5
Graphics in Windows and the Web
Graphics refers to any text, drawing, image, or icon that is displayed on the screen in either:
Windows FormsPictureBox controlCan draw graphics shapes (circles, lines, rectangles) on
a form or controlAccepts more file formats than a Web Form
Web FormsImage control
13-6
The Graphics Environment
>NET framework uses GDI+ technology for drawing graphics
GDI+ is designed to be device-independentCode to draw a graphic is the same regardless of the
output device
13-7
Steps for Drawing Graphics
Create a Graphics object to use as a drawing surface
Instantiate a Pen or Brush object to draw with
Call the drawing methods from the Graphics object
13-8
The Paint Event Procedure
Place code for drawing methods in the Paint event procedure for the form or control
Graphics are redrawn every time form is repainted or rendered
Declare a Graphics objectAssign the Graphics property of the procedure's
PaintEventArgs argument to the new Graphics object
Private Sub Form1_Paint(ByVal sender As Object, _ ByVal e As System.Windows.Forms.PaintEventArgs) _
Handles Me.Paint' Create a graphics object.Dim gr As Graphics = e.Graphics
13-9
Pen and Brush Objects (1 of 2)
PenUse to draw lines or outlined shapes such as rectangles
or circlesProperties: Width, Color
BrushUse to create filled shapesProperty: Color
13-10
Pen and Brush Objects (2 pf 2)
Width propertySpecifies the width of the stroke of a line or
outlined shape created by Pen objectSpecified in pixelsDefault width = One pixel
Color propertySpecifies color of lines drawn by Pen object and
color of filled shapes drawn by Brush objectAssign color using Color constants
13-11
Graphic Shapes Drawn with Pen and Brush Objects
Drawn with Pen
Drawn with Brush
13-12
Constructors
Examples
The Pen Class
Pen(Color)Pen(Color, Width)
Dim redPen As New Pen(Color.Red)Dim widePen As New Pen(Color.Black, 10)
13-13
Constructor
Example
The SolidBrush Class
SolidBrush(Color)
Dim blueBrush As New SolidBrush(Color.Blue)
There are other Brush Classes:TextureBrush, HatchBrush, LinearGradientBrush, PathGradientBrush. See Help for more information.
13-14
The Coordinate System (1 of 2)
Graphics are measured from a starting point of 0,0 for the X and Y coordinates beginning in the upper-left corner
X represents the horizontal position and Y is the vertical position
The starting point depends on where the graphic is placed-each drawing method allows a specific starting position using X and Y coordinates
Most of the drawing methods allow the position to be specified using eitherPoint structureSize structure Rectangle structure
13-15
Form
PictureBox
0,0Position
On Form
0,0Position OnPictureBox
The Coordinate System (2 of 2)
13-16
The Point Structure
Designed to hold the X and Y coordinates as a single unit
Create a Point object and give it values for X and Y
Use the object anywhere that accepts a Point structure as an argument
Example
Dim myStartingPoint As New Point(20, 10)
13-17
The Size Structure
Two components, specified in pixelsWidth (specified first)Height
Use the object anywhere that accepts a Size structure as an argument
Example
Dim myPictureSize As New Size(100, 20) ‘Width is 100, height is 20
13-18
The Rectangle Structure
Defines a rectangular regionSpecified by
Upper left corner (X and Y coordinates )Size (width and height)
Use the object anywhere that accepts a Rectangle structure as an argument
Example
Dim myOtherRectangle As New Rectangle(xInteger, yInteger, _ widthInteger, heightInteger)
Dim myOtherRectangle As New Rectangle(myStartingPoint, myPictureSize
13-19
Graphics Methods
Two basic categories, draw and fill
Draw methods create an outline shape with a Pen object
Fill methods are solid shapes created with Brush objects
Each method requires X and Y coordinates or a Point object, some require the size
13-20
Graphics Methods – General Form
DrawLine(Pen, x1Integer, y1Integer, x2Integer, y2Integer) DrawLine(Pen, Point1, Point2)
DrawRectangle(Pen, xInteger, yInteger, widthInteger, heightInteger)DrawRectangle(Pen, Rectangle)
FillRectangle(Brush, xInteger, yInteger, widthInteger, heightInteger)FillRectangle(Brush, Rectangle)
FillEllipse(Brush, xInteger, yInteger, widthInteger, heightInteger)FillEllipse(Brush, Rectangle)
13-21
Graphics Methods – Code Example
Private Sub graphicsForm_Paint(ByVal sender As Object, _ ByVal e As System.Windows.Forms.PaintEventArgs) _ Handles MyBase.Paint Dim gr As Graphics = e.Graphics ' Create a graphics object. Dim redPen As New Pen(Color.Red) gr.DrawRectangle(redPen, 10, 10, 30, 30) ' Draw a red rectangle.
gr.DrawLine(redPen, 50, 0, 50, 300) ' Draw a red line. Dim blueBrush As New SolidBrush(Color.Blue)
gr.FillEllipse(blueBrush, 100, 100, 50, 50) ' Draw a blue filled circle.
Dim widePen As New Pen(Color.Blue, 15)gr.DrawLine(widePen, 300, 0, 300, 300) ' Draw a fat blue line.
End Sub
13-22
Selected Methods from the Graphics Class
ClearDisposeDrawArcDrawLineDrawEllipseDrawRectangle
DrawPie DrawStringFillEllipseFillPieFillRectangle
See Help for information for all draw and fill methods
13-23
Random Numbers
Random class contains methods to return random numbers of different data types
To generate a different series for each run, use an integer value when instantiating an object from the Random class (seeding the random number generator)
Can use system date to get different seed for each execution of code
Generate random numbers using the Random object’s Next method
13-24
The Random.Next Method
General Form
Examples
' Any positive integer number.Object.Next( )' A positive integer up to the value specified.Object.Next(maximumValueInteger)' A positive integer in the range specified.Object.Next(minimumValueInteger, maximumValueInteger)
' Return an integer in the range 0 – 10.randomInteger = generateRandom.Next(10)' Return an integer in the range 0 to the width of the form.randomNumberInteger = generateRandom.Next(1, Me.Width)
13-25
Simple Animation
Possible approachesDisplay an animated .gif file in a PictureBoxReplace one graphic with anotherMove a pictureRotate through a series of picturesCreate graphics with various graphics methods
On a Web page display animated .gif files or use a scripting language or Java Applets and avoid roundtrips to the server
13-26
Displaying an Animated Graphic
Animation is achieved on either a Windows Form or a Web Form by displaying an animated.gif file
Use a PictureBox control on a Windows Form and an Image control on a Web Form
13-27
Controlling Pictures at Run Time
Pictures can be added or changed at run timeTo speed execution, load pictures in controls that can
be made invisible and set Visible property to True at run time
Use the FromFile Method to load a picture at run timeRequires file name and pathStore image files in Bin folder to eliminate need for path
To remove a picture from the display, either hide or use the Nothing constant
13-28
Switching Images
Easy way to show animation is to replace one picture with another
Use images (or icons) of similar sizes
May use images (or icons) with opposite states (open/closed, on/off, etc.)--
13-29
Creating Animation
Each of the graphics is placed into the upper picture box when the user clicks the Change button
13-30
Moving a Picture
Change the Left and Top properties
--OR--, betterUse the control's SetBounds Method which produces
a smoother-appearing move
13-31
Use to move a control or change its sizeGeneral Form
Examples
SetBounds Method
SetBounds(xInteger, yInteger, widthInteger, heightInteger)
Me.planePictureBox.SetBounds(xInteger, yInteger, planeWidth, planeHeight)Me.enginePictureBox.SetBounds(xInteger, yInteger, widthInteger,
heightInteger)
13-32
Cause events to occur at a set interval with its Tick event
Useful for animation; move or change an image each time the Tick event occurs
Set value at run time or design time
The Timer Component (1 of 2)
13-33
The Timer Component (2 of 2)
Interval propertyBetween 0 and 65,535 milliseconds1,000 milliseconds = 1 second
Enabled propertyFalse (default) ==> Do not run Tick eventTrue ==> Run Tick event at designated interval
Tick eventOccurs each time the Timer's designated interval
elapses, if Enabled = True
13-34
The Scroll Bar Controls
Horizontal scroll bars Vertical scroll barsUse to scroll through a
document or a windowUse to control items that
have a range of values such as sound level, color, or size
Can be changed in small or large increments
13-35
Scroll Bar Properties (1 of 3)
Together represent a range of valuesMinimum
Minimum value
MaximumMaximum value
SmallChangeDistance to move when user clicks scroll arrows
LargeChangeDistance to move when user clicks gray area of scroll
bar or presses Page-Up or Page-Down keys
13-36
Scroll Bar Properties (2 of 3)
Gray Area(LargeChange property)
Scroll Box(Value property)
Scroll Arrow(SmallChange property)
Maximum value(Maximum property)
Minimum value(Minimum property)
13-37
Scroll Bar Properties (3 of 3)
Value PropertyIndicates the current position of the
scroll box and the corresponding valuewithin the scroll bar
User clicks up Scroll ArrowValue property decreases by the amount of the
SmallChange unless Minimum has been reached User clicks down Scroll Arrow
Value property increases by the amount of the SmallChange unless Maximum has been reached
13-38
Scroll Bar Events
ValueChanged eventOccurs anytime the Value property changes, by user
action or in codeScroll event
Occurs when user drags the scroll boxAs long as user continues to drag scroll box this event
continues to occurOnly when user releases scroll box will Scroll event
cease and ValueChanged event occur
13-39
The SoundPlayer Component
Programs play sounds files, called wave files (.wav) using the new My.Computer.Audio.Play
--OR--A SoundPlayer componentThe component’s SoundLocation property gives the
location of the file
13-40
Adding Sounds Files
When using sounds in a project the best way is to add the files to the project’s resources
To refer to the filename in code, use My.Resources.Filename
13-41
A Sound-Playing Program
Users can choose to play one of the preselected sounds or select a file to play
File types are restricted using the filter property
13-42
Drag-and-Drop Programming (1 of 2)
Often Windows users use drag-and-drop events rather than selecting a menu item or pressing a button
Drag-and-drop programming requires that a user begin the drag-drop with a MouseDown event
Determine the effect of the drop with a DragEnter event
The event that holds the code for the drop is the DragDrop event
13-43
Drag-and-Drop Programming (2 of 2)
The Source object is dragged to the Target object in a drag-and-drop operation
13-44
The Source Object
The item chosen to drag With .NET programming begin a drag-drop operation
by setting the source object using a control’s DoDragDrop method
The DragDrop effect specifies the requested action; choices inlcude DragDropEffects.Copy, DragDropEffects.Move, and DragDropEffects.None
General Form Example
ObjectName.DoDragDrop(DataToDrag, DesiredDragDropEffect)
13-45
The Target Object
Location at which a user releases the mouse, a drop, is the target
Forms may have multiple targetsTo set a control to be a target, set its AllowDrop
property to TrueTarget control needs
DragEnter procedure that sets the effect DragDrop event procedure that executes the action to
take and when the drop takes place
13-46
The DragEnter Event
When a user drags a source object over the target, the target control’s DragEnter event fires
The argument is defined as DragEventArgs—which has special properties for the drag operation
13-47
The DragDrop Event
Statements to perform additional functions are added to the DragDrop event
Data that is being dragged is contained in the Data property of the argument of the DragDrop event procedure
Retrieve the dragged data using the GetData method of the Data object
Format the data or use a predefined clipboard data format