Introduction To Vector Graphic
Introduction To Vector Graphic
Multimedia Technology
1
Graphical Information
There are two principle methods of representing graphical data
Vectors
Bitmaps
2
Vector Graphics
Vector images are made up of many individual, scalable objects
These objects are defined by mathematical equations rather than
pixels
Objects may consist of lines, curves, and shapes with editable
attributes such as color
Unsuitable for producing photo realistic image
3
Coordinates and Vectors
We identify any individual pixel as (column, row)
Two points define a vector e.g. (1,1) (6,9)
Pixel Coordinates
Since an image is stored as a rectangular array of pixels,
a natural way of identifying any single pixel is by giving
its column and row number in the rectangular array.
Pixel Coordinates can not be real values .
These must be integers.
There can not be half a pixel
4
In device independent modeling, it is very much possible to have real
coordinates.
The coordinate system used by the drawing program may not be same
as the coordinate system used by the rendering device . In this case
a conversion is required.
Pair of coordinates can be used only to define points, but also to
define displacements.
For any pair of points P1=(x1,y1) and P2=(x2,y2), the displacement
from P1 to P2 is (x2-x1, y2-y1) or P2-P1.
When a pair of values is used to specify a displacement in this way, we
call it a two-dimensional vector.
5
Vector Primitives
Straight Lines:
Drawn between two X-Y positions
Color and dotted line pattern
Optional arrow heads
Curves:
Bezier curves with moveable
control points
Squares and Rectangles:
Drawn between two opposite corner
points
Optional line and fill colors
Polygons
Series of connected lines
Optional fill colors
Optionally open or closed
6
Circles and Ellipses:
Centre position and radius
Optional line and fill colors
Text:
Normally drawn inside invisible
bounding rectangle
Font, size, color.
Selectable left, centre, right
alignment
Other Shapes:
Stars
3D shapes
Connectors
7
Bezier Curves
Curve completely defined by four points:
Start and end (2 endpoints (P1, P4))
Two direction points (2 direction points (P2, P3))
You can drag these around to get the curve you want
The curve produced by these four points is unique
8
Steps in constructing a Bezier curve
9
Some Bezier curve
10
Paths
Bezier curves can be combined to form more elaborate shapes and curves.
11
Stroke and Fill
All object line types can be specified as dotted etc, with a wide range of line
thicknesses, colours, opacity etc.
You can also specify fill colour or texture
Most packages allow you to import a bitmap and use that as a fill pattern
Fill patterns are tiled this can be quite a skilled process to make it sea
12
13
Lines
14
Transformations
Any element or elements in a vector drawing can be manipulated
without affecting any others:
Translated (moved)
Rotated
Scaled
Reflected
Other transformations (e.g. Shear) are possible
15
Resolution Advantages
Although converting from vector graphics to a pixel based display
can cause aliasing problems, in general vector graphics scalability
can give much better results than bitmaps
16
File Formats
Common file formats such as GIF and JPEG are used to store bit
mapped data
Unfortunately vector graphics formats are generally dependant on the
Illustrator application used:
AI (Adobe Illustrator)
CDR (CorelDraw)
WMF Windows Metafile
VSD Microsoft Visio
SWF Macromedia Flash
SVG (Scalable Vector Graphics) XML based descriptions
stands for Scalable Vector Graphic. It is a language for describing two
dimensional graphics in XML. It allows three types of graphic objects:
vector graphic shapes, images and text.
PostScript
was developed by Adobe as a page description language.
VRML
stands for Virtual Reality Markup Language. It is for decrypting a scene
in a virtual world.
17
VRML Sample
18
Vector versus Bitmap
19
Vector Objects
Common programs that produce vector
images include Adobe Illustrator, Corel
Draw, Macromedia Freehand and Fireworks.
20