Advanced User Interfaces with Java SD

1
Advanced User Interfaces with JavaSD98 -
Session 3206

• Ted Faison
• ted.faison_at_computer.org
• Faison Computing Inc.
• www.faisoncomputing.com

2
JDK 1.2 - A Better Graphics Framework

• JDK 1.1 had little or no support for complex
  shapes, coordinate transformations or pixel
  blending
• The graphics extensions were added as new
  packages under the AWT as the Java 2D API

3
The Java 2D Packages

• java.awt.color Color control
• java.awt.font Fonts as complex shapes
• java.awt.geom Coordinate transformations and
  shapes
• java.awt.print Advanced printing support
• Books, Pages and Paper

4
Java 2D API Features

• Support for separate user and device coordinate
  spaces
• Coordinates can be integers, floats or doubles

Device Space
User Space
5
Java 2D API Features

• Support for coordinate transformations, for
  translation, rotation, scaling and shearing

Device Space
User Space
6
Java 2D API Features

• Support for complex shapes and hit-testing
• Support for complex clipping
• More precise color control
• Support for variable transparency, allowing color
  blending

7
Java 2D API Features

• Better image-processing support, with
  convolution, color look-up, amplitude scaling.
• Improved screen updating, with offscreen buffers
  supporting BufferedImages and transparency

8
Basic Drawing

• The old Graphics context is still there
• All 2D drawing done using Graphics2D
• Painting typecasting Graphics into Graphics2D
• public void paint(Graphics g)
• Graphics2D g2d (Graphics2D) g
• g2d.setColor(Color.red)
• //

9
Coordinate Transformations

• Functions that map a point in one space to a
  point in another space
• Represented using a 3x3 matrix
• Transformations require multiplying each pixel by
  a transformation matrix
• Positive angles rotate the X axis towards the Y
  axis
• Can be used to invert axes, bend images, distort
  space arbitrarily

10
Coordinate Transformations
a11 a12 a13 a21 a22 a23 0 0 1
x y 1
a11x a12y a13 a21x a22y a23 0 0
1
x y 1


11
Affine Transforms

• Maintain straightness and parallelism
• Translation
• setToTranslation(double dx, double, dy)
• used to support graphics scrolling

Device Space
User Space
12
Affine Transforms

• Rotation
• Rotating about the origin
• setToRotation(double theta)

Device Space
User Space
13
Affine Transforms

• Rotation about an arbitrary point
• SetToRotation(theta, x, y)

(x, y)
(x, y)
Device Space
User Space
14
Affine Transforms

• Shearing
• setToShear(double sh, double sy)

Device Space
User Space
15
Affine Transforms

• Scaling
• setToScale(double sx, double sy)
• anisotropic vs isotropic scaling

Device Space
User Space
16
Using class AffineTransform

• Commands can be cumulative
• concatenating transformations
• Commands are not commutative
• Matrix multiplication is not commutative
• Dealing directly with the transformation matrix,
  to effect combined transformations in one pass
• g2D.setTransform(myAffineTransform)

17
Affine Transforms

• Handling transformed images with offscreen
  buffers
• Examples
• ScalingImages.java
• RotatingImages.java
• ShearingImages.java

18
Drawing with Paths

• All 2D shapes are drawn as paths, including lines
  and rectangles
• Class GeneralPath
• Used to define arbitrary paths
• The outline can be stroked
• Graphics2D uses a default stroke
• square pen
• width is 1 pixel
• continuous drawing - no dashes

19
Bezier curves

• Used by the 2D API for cubic curves.
• Defined by simple control points

20
Drawing a Straight Line

• public void paint(Graphics g)
• Graphics2D g2d (Graphics2D) g
• g2d.setColor(Color.red)
• GeneralPath path
• new GeneralPath(GeneralPath.EVEN_ODD)
• path.moveTo(50.0f, 50.0f)
• path.lineTo(200.0f, 200.0f)
• g2d.draw(path)

21
Drawing a Straight Line
22
Filling a shape

• public void paint(Graphics g)
• Graphics2D g2d (Graphics2D) g
• g2d.setColor(Color.blue)
• GeneralPath path
• new GeneralPath(GeneralPath.EVEN_ODD)
• path.moveTo(20.0f, 20.0f)
• path.lineTo(100.0f, 20.0f)
• path.lineTo(100.0f, 70.0f)
• path.lineTo(20.0f, 70.0f)
• path.closePath()
• g2d.fill(path)

23
Filling a shape
24
Filling a Shape with a Pattern

• BufferedImage image // create a buffered image
• Rectangle2D.Float rect new Rectangle2D.Float(0.0
  f, 0.0f, 100.0f, 200.0f)
• TexturePaint pattern
• new TexturePaint(image, rect,
• TexturePaint.NEAREST_NEIGHBOR)
• g2d.setPaint(pattern)
• g2d.drawString(styledString, 10, 10)

25
Filling a Shape with a Pattern
26
Filling a Shape with an Image

• Image image getToolkit().getImage(url)
• AffineTransform at new AffineTransform()
• at.setToTranslation(0, 200)
• g2d.transform(at)
• g2d.setClip(myShape)
• at.setToTranslation(0, -200)
• g2d.drawImage(image, at, this)
• at.setToTranslation(0, 200)
• g2d.setClip(null)
• g2d.draw(myShape)

27
Filling a Shape with an Image
28
Filling a Shape with a Gradient

• Font myFont new Font("Helvetica",
• Font.PLAIN, 200)
• StyledString styledString
• new StyledString("AB", myFont)
• Shape myShape styledString.getStringOutline()
• GradientPaint gradient
• new GradientPaint(0.0f, 0.0f, Color.red,
• 200.0f, 200.0f,
• Color.yellow)
• g2d.setPaint(gradient)
• g2d.drawString(styledString, 10, 200)

29
Filling a Shape with a Gradient
30
Custom Strokes

• Class BasicStroke
• simple to use
• define common stroke properties
• width
• end caps
• line joins
• dash attributes

31
Defining a Custom Stroke

• g2d.setStroke(
• new BasicStroke(penWidth,
• BasicStroke.CAP_ROUND,
• BasicStroke.JOIN_MITER ) )
• path.moveTo(10.0f, 40.0f)
• path.lineTo(90.0f, 40.0f)
• g2d.draw(path)

32
Defining a Custom Stroke
33
2D Drawing Shortcuts

• interface Rectangle2D
• Rectangle2D.Float
• Rectangle2D.Double
• RoundRectangle2D
• Arc2D
• Ellipse2D

34
Clipping

• Graphics2D.setClip(Path)
• Clipping a circle with a rectangle
• Ellipse2D.Float circle new
• Ellipse2D.Float(10.0f, 10.0f, 100.0f,
  100.0f)
• Rectangle2D.Float rect new Rectangle2D.Float
  (10.0f, 30.0f, 100.0f, 70.0f)
• g2d.setClip(rect)
• g2d.setColor(Color.red)
• g2d.fill(circle)
• g2d.setClip(null)
• g2d.setColor(Color.black)
• g2d.draw(rect)

35
Clipping a Circle with a Rectangle
36
Clipping with Text

• Font myFont new Font("Helvetica",Font.PLAIN,200)
  
• StyledString styledString
• new StyledString("ABC", myFont)
• Shape myShape styledString.getStringOutline()
• AffineTransform at new AffineTransform()
• at.setToTranslation(0, 200)
• g2d.transform(at)
• Ellipse2D.Float circle
• new Ellipse2D.Float(10.0f,-150.0f,400.0f,150.0f)
• g2d.setClip(myShape)
• g2d.setColor(Color.red)
• g2d.fill(circle)

37
Clipping with Text
38
Blending objects

• Transparency
• The Alpha Channel
• Compositing Operations
• called Raster Operations (ROP) in Windows
• Class AlphaComposite
• Implements a subset of the Porter-Duff rules
• Cd CsFs CdFd
• Ad AsFs AdFd
• C Color d destination
• F Fraction s source
• A Alpha

39
Compositing Operations

• Alpha1 indicated total opaqueness
• Setting the Operation
• AlphaComposite c AlphaComposite.getInstance(
• AlphaComposite.SRC_OVER,
• 0.5f)
• g2d.setComposite(c)

40
Porter-Duff Operations Supported

• CLEAR destination cleared
• SRC source copied to destination
• SRC_OVER source is blended over dest
• SRC_IN part of source already in dest replaces
  dest
• SRC_OUT part of source not already in dest
  replaces dest
• DST_IN, DST_OUT, DEST_OVER

41
Using the SRC Rule
42
Using the SRC_OVER Rule
43
Using the SRC_IN Rule
44
Using the SRC_OUT Rule
45
Conclusion

• The Java 2D API extends the AWT with
• advanced geometric shapes
• coordinate transformations
• shapes of arbitrary complexity
• text as a shape
• arbitrary clipping regions
• image blending through compositing
• image processing capabilities
• precise color control