In Vector graphics, images are built up using
shapes that can easily be described
mathematically
Common formats for representing vector
graphics include
SVG (Scalable Vector Graphics format )
SWF (Flash movie), developed for vector
animation using macromedia’s flash
Coordinates and Vectors
(0,0)
(7,3)
(3,7)
For the purposes of modeling shapes in a device-independent way,
we need to generalize to coordinate system where coordinates can
be real. There are infinite geometric point .
Drawing programs usually follow mathematical convention by
using a coordinate system where y- values increase upwards,
Other graphics packages, such as QuickDrawn the Java Abstract
Windowing Toolkit, often use the opposite convention, with y -values
increasing downwards.
The same convention is employed in some graphics file formats
SVG, SWF, It corresponds more closely to the way pixels are drawn
onto physical output devices.
You generally should not have to concern yourself with the
coordinate system used by the output device. Your drawing program
will convert from its coordinate system to that of whichever device
your drawing is rendered on (Coordinate transformation).
(x1, y1)
(x2, y2)
The term “vector graphics” was originally used to refer
to the production of images on output devices where
the position of the electron beam of a cathode ray tube
was controlled directly by setting its (x,y) coordinates,
rather than scanning the screen in a raster pattern. By
changing the coordinate values, the beam was made
to trace out vectors, hence the name.
This type of graphics device only lends itself to the
drawing of simple shapes, which is why the name is
retained for the shape-based graphics systems.
We can use the methods of coordinate geometry to
derive equations for arbitrary straight lines, circles,
ellipses, and so on.
Using such equations we can represent shapes
simply by storing the appropriate constants that
appear in the equations, since it is these which
distinguish between different shapes belonging to the
same class.
Example
The equation of a straight line is usually written as
y = mx + c,
where the constants m: slope and c: intercept.
since we can only use finite segments of lines, it is necessary to
store the endpoints ((x1, y1), (x2, y2)).
The values of m and c can be deduced from these.
if the line passes through (x1, y1) and ( x 2 , y2),
m =(y2 - y 1 ) l ( x 2 - x1) and
c = (x2 y1 -x1 y2) / (x2 -x1).
Hence, the coordinates of the endpoints are enough on their own to
specify both the extent of the line and the constants in its equation.
For example, if a line has endpoints (0,1) and (12, 31),
we could compute the y coordinate corresponding to
each integer value as x was stepped from 0 to 12.
Remember that
a pixel's coordinates are always integers and we
cannot set the value of just part of a pixel.
The pixel image can, therefore, only ever approximate
the ideal mathematical object which the vector model
describes.
Example
The line described by the equation
y = 5 (x/2)+ 1,
for any odd integer value of x, y must be rounded
up (or down) to get its corresponding integral
value.
The coordinates of pixels along the line would be
(0, 1), (1, 4), (2, 6), (3, 9)....
To get a continuous line, we set blocks of
pixels, but the height of the blocks
alternates between 2 and 3 pixels, so that
the ideal straight line is approximated by
an uneven staircase.
If the resolution of the output device is low,
(i.e. the pixels are relatively large)
the jaggedness of lines,
Rectangle whose sides are parallel to the axes can be
drawn
Method 1: by selecting the rectangle tool, holding down
the mouse button where you want one corner, and
dragging to the opposite corner: a rectangle can
obviously be completely described by the coordinates of
its opposite corners.
Method 2: Rectangles can also be drawn with the
centered rectangle tool. With this, you begin at the
point where you want the centre to be, and then drag
out one corner.
It should be clear that it is possible for the program to
compute the coordinates of opposite corners from those
of the centre and one corner, and vice versa.
Method 3: In SVG a rectangular can be represented as
A rect element (coordinate of top-left corner, width, and
hieght) or a sequence of four straight lines as in SWF
and PDF
where the endpoint P1 = ( x1 , y1 ) . The other
control points are then given by:
Stroke and Fill
A path, strictly speaking, is an abstract mathematical
entity: just as points are infinitesimally small, so a
path is infinitesimally thin.
the strokes applied by a drawing program have
characteristics, such as weight and colour, which
determine their appearance.
Joins at corner points also need consideration,
because wide lines can only meet cleanly if they do
so at 90°when they meet at any other angle an
unsightly gap or overlap will result. This can be
removed in several ways. The three styles of line
join are
1. a mitre — as in a picture frame, the outside
edges of the lines are extended to meet at a
point;
2. round — a circular arc is used to produce a
rounded corner;
3. bevel — the segments are finished off square
where they join, and the resulting notch is filled
in with a triangle to produce a flat ended joint.
Pattern Fill
Gradient mesh
Rotation
For rotation by an angle θ counter-clockwise about the origin, the functional form is
x' = xcosθ − ysinθ and y' = xsinθ + ycosθ. Written in matrix form, this becomes:
Scaling