2d graphics: rendering details chapter 3. bird’s eye view overview of computer graphics 2d...
TRANSCRIPT
2
Bird’s Eye View Overview of Computer Graphics 2D Graphics: Basics 2D Graphics: Rendering Details
– Colors, paints, strokes, transformation, alpha composition, clipping path, fonts, glyphs, and other rendering details
2D Graphics: Advanced topics
3
Objectives To understand color spaces To use the Java Color class To be able to use different types of paints in drawing visual objects To apply stroke types To construct affine transforms including translation, rotation,
scaling, shearing, and reflection To understand object transformations and viewing
transformations To combine basic transformations to form more complex ones To identify the compositing rules To use clipping path To apply fonts and font metrics To understand glyph, ligature, and derived font
4
Color Space CIEXYZ RGB CYMK sRGB
– Standard RGB Color Class
– BLACK, BLUE, CYAN, DARK_GRAY, GRAY, GREEN, LIGHT_GRAY, MAGENTA, ORANGE, PINK, RED, WHITE, YELLOW
bgr pbpgprc
Source
5
Paint Generalizing the concept of color, Java 2D
drawing applies an attribute called paint
Paint
Color
TexturePaint
GradientPaint
Source
6
fillRect(): Fills the specified rectangle void java.awt.Graphics.fillRect(int arg0, int arg1, int arg2, int arg3) public abstract void fillRect(int x, int y, int width, int height) The left and right edges of the rectangle are at x and x + width - 1. The top and bottom edges are at y and y + height - 1. The resulting rectangle covers an area width pixels wide by height pixels tall. The rectangle is filled using the graphics context's current color. Parameters:
– x - the x coordinate of the rectangle to be filled. – y - the y coordinate of the rectangle to be filled. – width - the width of the rectangle to be filled. – height - the height of the rectangle to be filled.
See Also: clearRect(int, int, int, int), drawRect(int, int, int, int)
8
Affine Transformation
Maps parallel lines to parallel lines Common affine transforms
– Translation– Rotation– Reflection– Scale– Shear
x
y
x
y
x
y
x
y
x
y
9
Transformation Matrix
Source
100
10
01
b
a
Translation by (a,b)
100
0cossin
0sincos
Rotation about the origin
100
00
00
Scaling
100
011
2
1
2
01
21
1
2
2
2
2
22
k
k
k
kk
k
k
Reflection about the line y=kx
100
010
01 s
Shearing along the x-axis by the factor s
10
Composition of Transforms
Combining transforms Non-commutative Matrix product )))((())(( 321321 pTTTpTTT
Source
13
A Probabilistic Model α value as the probability of the color to be shown Four different events:
– source color occurs only– destination color occurs only– both colors occur– neither color occurs.
SRC Both DST
Neither
Source
)1( ds
)1( sd
ds
)1)(1( ds
15
Font Logical fonts
– Serif– SansSerif– Monospaced– Dialog– DialogInput
Font styles– PLAIN– ITALIC– BOLD
Derived font Font metrics
Source