Sei sulla pagina 1di 20

Vector Graphics

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