advanced user interfaces with java sd’98 - session 3206 ted faison [email protected] faison...
TRANSCRIPT
Advanced User Interfaces with Java
SD’98 - Session 3206
Ted Faison
Faison Computing Inc.
www.faisoncomputing.com
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
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
a11 a12 a13
a21 a22 a23
0 0 1
x
y
1
a11x a12y a13
a21x a22y a23
0 0 1
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) (x, y)
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
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);
}
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 with a PatternBufferedImage 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 an ImageImage 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 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);
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);
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 with TextFont 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);
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 = Color d = destination
F = Fraction s = 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