2D Graphics: Rendering Details Chapter 3

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

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

Color Space CIEXYZ RGB CYMK sRGB Color Class Standard RGB black, blue, cyan, dark_Gray, gray, green, light_Gray, magenta, orange, pink, red, white, yellow Source

Paint Generalizing the concept of color, Java 2D drawing applies an attribute called paint Source

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)

Strokes Width End style Join style Miter limit Dash pattern Source

Affine Transformation Maps parallel lines to parallel lines Common affine transforms Translation Rotation Reflection Scale Shear

Transformation Matrix Translation by (a,b) Rotation about the origin Scaling Shearing along the x-axis by the factor s Reflection about the line y=kx Source

Composition of Transforms Combining transforms Non-commutative Matrix product Source

Alpha Compositing α-channel Transparency Porter-Duff rules

Porter-Duff Rules Clear SrcOver SrcIn SrcOut Src SrcAtop Xor DstOver DstIn DstOut Dst DstAtop

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. Source

Clipping Path The rendered image may be clipped by a clipping path Source

Font Logical fonts Font styles Derived font Font metrics Serif SansSerif Monospaced Dialog DialogInput Font styles PLAIN ITALIC BOLD Derived font Font metrics Source

Ligature A glyph may contain multiple letters A common ligature:

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); Source