6460A_08
description
Transcript of 6460A_08
Module 8: Graphics and Multimedia
• Creating 2-D Graphics
• Displaying Images
• Creating 3-D Graphics
• Manipulating the 3-D Environment
• Adding Multimedia
Lesson: Creating 2-D Graphics
• 2-D Graphics Support in WPF
• Drawing Shapes
• What Are Paths and Geometries?
• Demonstration: Filling Shapes and Geometries
• Demonstration: Using and Animating Transformations
2-D Graphics Support in WPF
ShapesShapes
RectangleRectangle
EllipseEllipse
LineLine
PathPath
EllipseEllipse
PenPen
BrushBrush
GeometryGeometry
Defined using Height and Width properties
<Rectangle Height="50" Width="100" /><Rectangle Height="50" Width="100" />
<Ellipse Height="50" Width="100" /><Ellipse Height="50" Width="100" />
Drawing Shapes
Defined using two points
<Line X1="10" Y1="10" X2="50" Y2="50" /><Line X1="10" Y1="10" X2="50" Y2="50" />
What Are Paths and Geometries?
Paths are defined by geometries, which are made up of figures and segments
<Path ... <PathGeometry> ... <PathFigureCollection> ... <!-- A Triangle. --> <LineSegment Point="10, 300" /> <LineSegment Point="200, 200" />
<Path ... <PathGeometry> ... <PathFigureCollection> ... <!-- A Triangle. --> <LineSegment Point="10, 300" /> <LineSegment Point="200, 200" />
Demonstration: Filling Shapes and Geometries
In this demonstration, you will see how to:
• Define an Ellipse and a Rectangle
• Define Stroke and Fill values
• Create a triangle by using a Path
Demonstration: Using and Animating Transformations
In this demonstration, you will see how to:
• Add layout and render transformations to a Shape
• Animate the transformation objects
Lesson: Displaying Images
• WPF Imaging Components
• Demonstration: Displaying Images in WPF
• Encoding and Decoding Images
• Rotating, Converting, and Cropping Images
WPF Imaging Components
WPF introduces a new API for working with images:
• Image
• ImageBrush
• ImageDrawing
WPF supports most popular imaging formats including:
• Bitmap (BMP)
• JPEG
• Portable Network Graphics (PNG)
• Graphics Interchange Format (GIF)
• Windows Media Photo (WMP)
Demonstration: Displaying Images in WPF
In this demonstration, you will see how to:
• Display an image by using the Image class
• Display an image as a brush by using the ImageBrush class
• Display an image as a drawing by using the ImageDrawing class
Encoding and Decoding Images
DecodeDecode
BitmapDecoderBitmapDecoder
EncodeEncode
BitmapEncoderBitmapEncoder
Rotating, Converting, and Cropping Images
To rotate an image:
• Set the Rotation property on a BitmapImage
To convert an image to a different pixel format:
• Use FormatConverterBitmap
To crop an image:
• Set the Clip property of an Image or use CroppedBitmap
Lesson: Creating 3-D Graphics
• Differences Between 2-D and 3-D
• 3-D Graphics Support in WPF
• What Is a Viewport3D?
• Camera Types for Viewport3D
• Creating Models
• Demonstration: Rendering 3-D Content
Differences Between 2-D and 3-D
New concepts in 3-D:
• Z-axis
• Cameras
• Lights
Similar concepts, but new names:
• Drawings become models
• Brushes become materials
Viewport3DViewport3D
Model3DModel3D LightLight
3-D Graphics Support in WPF
CameraCameraMaterialMaterial
What is a Viewport3D?
3-D graphics content is encapsulated in a Viewport3D
• Viewport3D is a 2-D visual element
• Provides a viewport into a 3-D scene
• Contains 3-D models
<Canvas Width="300" Height="200"> <Viewport3D ClipToBounds="True" Width="150" Height="150" Canvas.Left="0" Canvas.Top="10"> ...
</Viewport3D></Canvas>
<Canvas Width="300" Height="200"> <Viewport3D ClipToBounds="True" Width="150" Height="150" Canvas.Left="0" Canvas.Top="10"> ...
</Viewport3D></Canvas>
Camera Types for Viewport3D
Create a camera to specify the point of view for a 3-D scene
OrthographicOrthographic
<OrthographicCamera LookDirection="-1.0 -1 -4" Position="2 2 4" UpDirection="0 1 0" Width="3.5" />
<OrthographicCamera LookDirection="-1.0 -1 -4" Position="2 2 4" UpDirection="0 1 0" Width="3.5" />
PerspectivePerspective
<PerspectiveCamera FieldOfView="45" LookDirection="-1.0 -1 -4" Position="2 2 4" UpDirection="0 1 0" />
<PerspectiveCamera FieldOfView="45" LookDirection="-1.0 -1 -4" Position="2 2 4" UpDirection="0 1 0" />
Creating Models
• Use models to define the shape of your 3-D objects
• Use MeshGeometry3D classes to define positions and triangle indices
<MeshGeometry3D Positions="2 0 0, 2 2 0, -2 0 0, -2 2 0" TriangleIndices="0 1 2, 3 2 1" />
<MeshGeometry3D Positions="2 0 0, 2 2 0, -2 0 0, -2 2 0" TriangleIndices="0 1 2, 3 2 1" />
2 2 02 2 0
2 0 02 0 0-2 0 0-2 0 000
11
22
Y
X
In this demonstration, you will see how to:
• Review triangle geometry
• Create a rectangle
• Move the PerspectiveCamera
Demonstration: Rendering 3-D Content
• Specifying Materials for a 3-D Model
• Specifying Light for a 3-D Model
• Demonstration: Transforming a 3-D Model
• Demonstration: Animating a 3-D Model
Lesson: Manipulating the 3-D Environment
Specifying Materials for a 3-D Model
Use materials to define the surface characteristics and texture of a 3-D object
<GeometryModel3D.Material> <DiffuseMaterial Brush="CornflowerBlue"> ...
<GeometryModel3D.Material> <DiffuseMaterial Brush="CornflowerBlue"> ...
Use any Material-derived classes on your model:
• DiffuseMaterial
• SpecularMaterial
• EmissiveMaterial
Use any Light-derived classes in your model:
• AmbientLight
• DirectionalLight
• PointLight
• SpotLight
Specifying Light for a 3-D Model
Use lights to make the surfaces of your models visible
<ModelVisual3D>... <AmbientLight Color="#404040" /> <DirectionalLight Color="#C0C0C0" Direction="2 -3 -1" />...
<ModelVisual3D>... <AmbientLight Color="#404040" /> <DirectionalLight Color="#C0C0C0" Direction="2 -3 -1" />...
In this demonstration, you will see how to:
• Make a geometry a resource
• Create a cube by using transforms
Demonstration: Transforming a 3-D Model
In this demonstration, you will see how to:
• Make a Storyboard
• Rotate a cube continuously by using DoubleAnimation
Demonstration: Animating a 3-D Model
• WPF Support for Multimedia
• Media Playback Modes
• Displaying Media by Using a MediaElement
• Controlling the Operation of a MediaElement
• Playing Media by Using a MediaPlayer
Lesson: Adding Multimedia
SoundSound
WPF Support for Multimedia
WPF supports the playback of audio and video media by using:
• MediaElement
• MediaPlayer
VideoVideo
Media Playback Modes
Set the Clock property on MediaElement and MediaPlayer to specify the media playback mode
• Independent mode
• Clock mode
Displaying Media by Using a MediaElement
To play media by using a MediaElement:
<StackPanel ... ><MediaElement Source="videos\bear.wmv" />
</StackPanel>
<StackPanel ... ><MediaElement Source="videos\bear.wmv" />
</StackPanel>
Controlling the Operation of a MediaElement
Control how the MediaElement behaves by using:
• LoadedBehavior
• UnloadedBehavior
Control playback through the MediaElement by using the playback methods:
• Play
• Pause
• Stop
• Close
Playing Media by Using a MediaPlayer
MediaPlayer is designed to be used with drawing objects
<VideoDrawing x:Name="videoSurface" Rect="0,0,300,200" /><VideoDrawing x:Name="videoSurface" Rect="0,0,300,200" />
MediaPlayer player = new MediaPlayer();player.Open(new Uri(@"videos\bear.wmv"));this.videoSurface.Player = player;player.Play();
MediaPlayer player = new MediaPlayer();player.Open(new Uri(@"videos\bear.wmv"));this.videoSurface.Player = player;player.Play();
XAMLXAML
C#C#
Lab: Graphics and Multimedia
• Exercise 1: Displaying 2-D Graphics
• Exercise 2: Displaying Images
• Exercise 3: Displaying 3-D Graphics
• Exercise 4: Playing Video Clips
Logon information
Virtual machine 6460A-LON-DEV-08
User name Student
Password Pa$$w0rd
Estimated time: 60 minutes
Lab Review
• How do you define an ImageBrush as background to another element?
• How do you use a VisualBrush to render a Path?
• Which object do you need to assign a camera to in order to display a 3-D model?
• What property of the AxisAngleRotation3D class do you need to target to cause a model to rotate?
• How do you stop a MediaElement from playing back the source media after it is loaded?