Chapter 3 2D Graphics: Rendering Details

1
Chapter 3 2D Graphics Rendering Details

• Color spaces, paints stroke types
• Affine transforms including translation,
  rotation, scaling, shearing, and reflection
• Object and viewing transformations
• To identify the compositing rules
• To use clipping path
• To apply fonts and font metrics
• To understand glyph, ligature, and derived font

2
Color Spaces

• There are several models used for color
• CIEXYZ - a color standard
• RGB - used for monitors
• CYMK - used for printers
• sRGB - device-independent color space

3
RGB Colors

• Color created by mixing light of different colors
• This is what a CRT monitor uses
• The Color class uses this model

4
CMY Colors

• Color created by mixing ink/paint of different
  colors
• This is how color on a a printer works

5
Creating Colors

• To create a Color, give the amount of red, green
  and blue
• Color blue new Color( 0, 0, 255)
• Color cyan new Color( 0, 255, 255)
• Color black new Color( 0, 0, 0)
• Color gray new Color( 128, 128, 128)
• Color white new Color( 255, 255, 255)
• Color hotPink new Color( 255, 105, 180)

6
Setting Colors

• The original AWT classes have two methods for
  controlling the color
• Every component (including JPanel) has a
  background color
• public void setBackground( Color c)?
• The graphics context has a color property
• The current color is used for drawing and filling
• public void setColor( Color c)?

7
Paint Interface
Generalizing the concept of color, Java 2D
drawing applies an attribute called paint
8
GradientPaint

• Defines a Paint with varying colors
• Specified by two points and two colors
• at the first point, the color is the first color
• at the second point, the color is the second
  color
• in between, the color changes gradually
• can be cyclic or acyclic (default)?
• an extra boolean parameter set to true creates a
  cyclic paint

9
TexturePaint

• TexturePaint uses an image to tile the area being
  filled
• Create with an image and an anchor rectangle
• The anchor controls the positioning of the image
• TexturePaint( BufferImage image, Rectangle2D
  anchor)?

10
Strokes

• The Stroke interface defines a method for
  creating an outline from a shape
• BasicStroke class has the following properties
• Width
• End style (butt, round, square)?
• Join style (bevel, miter, round)?
• Miter limit (limits miters on small angle joins)?
• Dash pattern and phase

11
Dash Patterns

• specified by an array of alternating on and off
  lengths
• 10, 10 makes uniformly spaced dashes where the
  spaces are the same length as the dashes
• 20, 5 makes equal-length dashes with a smaller
  space between them
• 10, 5, 5, 5 makes a dot-dash pattern
• The dash phase controls where in the pattern a
  line starts

12
Affine Transformation

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

13
Isometry

• An isometric transform preserves distances as
  well as parallel lines.
• Also called Euclidean or rigid motions
• Translation and rotation are isometries
• Reflection is also an isometry
• Shearing and scaling are not isometries

14
AffineTransform

• All but translation can be represented by a 2x2
  matrix
• Using a 3x3 matrix allows translations to be
  represented by a matrix too
• AffineTransform class has methods to set all but
  a refletion transform
• Constructors and methods allow you to set the
  matrix directly

15
Translation

• A translation moves an object (or a viewport)
• Specified by how far to move in the x direction
  and the y direction

void setToTranslate( double tx, double ty)?
16
Translation Matrix
17
Rotation

• Objects are rotated about the origin
• Specified by an angle to rotate through
• Rotations about other points are also possible

void setToRotate( double theta )? void
setToRotate( double theta, double x, double y)?
18
Rotation Matrix
19
Reflection

• Map an object to its mirror image
• To create a reflection, you need to specify the
  transformation matrix

void setTransform( float m00, float m01, float
m02, float m10, float m11, float
m12)? AffineTransform(float m00, float m01, float
m02, float m10, float m11, float m12)?
20
General Reflection Matrix
Reflection about line y k x
21
Reflection Matrix
Reflection about y-axis
22
Scaling

• Scaling changes the size of an object
• Shape is preserved if the scale factor is the
  same in both directions

void setToScale( double sx, double sy)?
23
Scaling Matrix
Scale by sx in x direction and sy in y direction
24
Shearing

• Shifts points in an object by an amount that is
  proportional to ist distance from a specified
  line
• Shape is not preserved

void setToShear( double shx, double shy)?
25
Scaling Matrix
Shear along x-axis by factor s
26
Composition of Transforms

• Combine simple transforms to get more complicated
  ones
• Matrix product is non-commutative

27
Clipping Path
The rendered image may be clipped by a clipping
path
28
Text in Java2D

• Text is treated as a special kind of geometric
  object
• A Font defines the rendering shapes of all the
  characters
• One of the properties of a Graphics is a Font
• Use the drawString method to display text
• the current Font is used
• use setFont (newFont) to change the font

29
Glyphs

• The geometry describing the shape of an object
  is a Glyph
• A glyph containing multiple letters is a ligature
• A common ligature

30
Font Class

• Available fonts are platform (and machine)
  dependent
• Logical fonts
• Serif
• SansSerif
• Monospaced
• Dialog
• DialogInput

• Font styles
• PLAIN
• ITALIC
• BOLD
• Derived font
• Font metrics

31
The Font Class

• A Font has three components
• Font name
• Font Style (add BOLD and ITALIC to get both)?
• Font Size - integer number of points
• Constructor takes three parameters
• Font( String fontFace,
• int fontStyle, int size)?

32
Creating Fonts

• Font f1 new Font( SansSerif, Font.BOLD, 24)
• Font f1 new Font( SansSerif,
• Font.BOLD Font.ITALIC, 16)

33
Deriving Fonts

• If you have a Font, you can modify it to get new
  fonts
• Use the getFont method to get the current font
  for a Graphics
• Use one of the deriveFont factory methods to
  create a new font
• Font deriveFont( float size)
• Font deriveFont( int style)
• Font deriveFont( AffineTransform tr)
• and several combinations

34
Font Measurements

• Sometimes, you want to know how big a String will
  be when you draw it
• Get a FontRenderContext for your Graphics2D
  object
• FontRenderContext getRenderContext ()?
• Use the getStringBounds method of the Font class
  to get the bounds of a string
• The width and height of the bounds can be used to
  compute positions
• Rectangle2D getStringBounds( String s,
  FontRenderContext frc)

35
Font Measurements

• A LineMetrics object can be used to get more
  detailed information
• Use the getLineMetrics method of the Font class
  to get the bounds of a string
• LineMetrics getLineMetrics( String s,
  FontRenderContext frc)
• The LineMetrics class has methods for getting
  measurements
• float getAscent()?
• float getLeading()?
• float getDescending()?

36
Glyph

• Sometimes you want to use some text as a clipping
  bounds
• Geometry of a text string in a particular font is
  represented by a GlyphVector
• Create a Shape from the GlyphVector
• Example
• Font font new Font("Serif", Font.BOLD, 144)
• FontRenderContext frc g2.getFontRenderContext()
  
• GlyphVector gv font.createGlyphVector(frc,
  "Java")
• Shape glyph gv.getOutline(100,200)

37
Alpha Compositing

• a-channel is used to simulate transparency in
  images
• not all drawing contexts have an alpha channel
• Color at a given point is a combination of the
  source and destination colors

38
A Probabilistic Model

• a value as the probability of the color to be
  shown
• Four different events
• source color occurs only - ?s (1 - ?d)?
• destination color occurs only - ?d (1 - ?s)?
• both colors occur - ?s ?d
• neither color occurs. - (1 - ?s) (1 - ?d)?

39
Alpha Compositing

• Porter-Duff came up with a set of 12 different
  rules that can be used.
• based on probabilistic model
• The AlphaComposite class incorporates these rues
• one constant for each rule
• Graphics2D has an AlphaComposite property
• The rules don't all work in a Graphics object
• They do work in BufferedImages

40
Porter-Duff Rules

• Xor
• DstOver
• DstIn
• DstOut
• Dst
• DstAtop

• Clear
• SrcOver
• SrcIn
• SrcOut
• Src
• SrcAtop