Advanced User Interfaces with Java SD’98 - Session 3206 - PowerPoint PPT Presentation

niveditha
advanced user interfaces with java sd 98 session 3206 l.
Skip this Video
Loading SlideShow in 5 Seconds..
Advanced User Interfaces with Java SD’98 - Session 3206 PowerPoint Presentation
Download Presentation
Advanced User Interfaces with Java SD’98 - Session 3206

play fullscreen
1 / 45
Download Presentation
Advanced User Interfaces with Java SD’98 - Session 3206
401 Views
Download Presentation

Advanced User Interfaces with Java SD’98 - Session 3206

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Advanced User Interfaces with JavaSD’98 - Session 3206 Ted Faison ted.faison@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.0f, 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 = Cs*Fs + Cd*Fd Ad = As*Fs + Ad*Fd C = Color d = destination F = Fraction s = source A = Alpha

  39. Compositing Operations • Alpha=1 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