Advanced User Interfaces with Java SD’98 - Session 3206 Ted Faison Faison Computing Inc.

JDK 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

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

Java 2D API Features Support for separate user and device coordinate spaces Coordinates can be integers, floats or doubles User Space Device Space

Java 2D API Features Support for coordinate transformations, for translation, rotation, scaling and shearing User Space Device Space

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

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

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); //… }

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

Coordinate Transformations a 11 a 12 a 13 a 21 a 22 a xy1xy1 a 11 x a 12 y a 13 a 21 x a 22 y a x’ y’ 1 ==

Affine Transforms Maintain straightness and parallelism Translation setToTranslation(double dx, double, dy); used to support graphics scrolling User Space Device Space

Affine Transforms Rotation –Rotating about the origin setToRotation(double theta); User Space Device Space

Affine Transforms –Rotation about an arbitrary point SetToRotation(theta, x, y); User Space Device Space (x, y)

Affine Transforms Shearing setToShear(double sh, double sy) User Space Device Space

Affine Transforms Scaling setToScale(double sx, double sy) anisotropic vs isotropic scaling User Space Device Space

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

Affine Transforms Handling transformed images with offscreen buffers –Examples ScalingImages.java RotatingImages.java ShearingImages.java

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

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

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

Drawing a Straight Line

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

Filling a shape

Filling a Shape with a Pattern BufferedImage image; // create a buffered image Rectangle2D.Float rect = new Rectangle2D.Float(0.0f, 0.0f, 100.0f, 200.0f); TexturePaint pattern = new TexturePaint(image, rect, TexturePaint.NEAREST_NEIGHBOR); g2d.setPaint(pattern); g2d.drawString(styledString, 10, 10);

Filling a Shape with a Pattern

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

Filling a Shape with an Image

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

Filling a Shape with a Gradient

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

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

Defining a Custom Stroke

2D Drawing Shortcuts interface Rectangle2D –Rectangle2D.Float –Rectangle2D.Double RoundRectangle2D Arc2D Ellipse2D

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

Clipping a Circle with a Rectangle

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

Clipping with Text

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 = Cs*Fs + Cd*Fd Ad = As*Fs + Ad*Fd C = Colord = destination F = Fractions = source A = Alpha

Compositing Operations Alpha=1 indicated total opaqueness Setting the Operation AlphaComposite c = AlphaComposite.getInstance( AlphaComposite.SRC_OVER, 0.5f); g2d.setComposite(c);

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

Using the SRC Rule

Using the SRC_OVER Rule

Using the SRC_IN Rule

Using the SRC_OUT Rule

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