2D Graphics: Rendering Details

Chapter 3

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)

7

Strokes

Width End style Join style Miter limit Dash pattern

Source

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

11

Alpha Compositing

α-channel Transparency Porter-Duff rules

ddss

dddsss

FF

CFCFC

12

Porter-Duff Rules

Clear SrcOver SrcIn SrcOut Src SrcAtop

Xor DstOver DstIn DstOut Dst DstAtop

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

14

Clipping Path The rendered image may be clipped by a clipping

path

Source

15

Font Logical fonts

– Serif– SansSerif– Monospaced– Dialog– DialogInput

Font styles– PLAIN– ITALIC– BOLD

Derived font Font metrics

Source

16

Ligature A glyph may contain multiple letters A common ligature:

17

Glyph Geometry of a text string with a font Obtain a glyph

Source

Font font = new Font("Serif", Font.BOLD, 144);FontRenderContext frc = g2.getFontRenderContext();GlyphVector gv = font.createGlyphVector(frc, "Java");Shape glyph = gv.getOutline(100,200);