Java 2D and SVG

Java 2D and SVG: 

Java 2D and SVG Rachel Struthers

Topics Covered: 

Topics Covered Java 2D Rendering Basic Shapes Transformations SVG(Scalable Vector Graphics) Basic drawing commands Some examples Batik Java library

Java 2D and SVG: 

Java 2D and SVG Vector based rather than pixel based Both can be used on the web to show high-quality interactive graphcis Java 2D – produce vector graphics using code API in Java 1.2 and above SVG – produce vector graphics using XML

Vector Graphics vs. Raster Graphics: 

Vector Graphics vs. Raster Graphics Raster Graphics Pixel based – high bandwidth Resolution dependent, picture from workstation might not work on PDA Examples: GIF, JPEG, BMP Vector Graphics Command based – low bandwidth Resolution independent = scalable, zoomable without loss of quality Examples: SVG, SWF (Flash), EPS (Encapsulated Postscript)

What is Java 2D?: 

What is Java 2D? API included with JDK Line art Text Imaging Allows you to easily Draw lines of any thickness Fill shapes with gradients and textures Move, rotate, scale, and shear text and graphics Composite overlapping text and graphics Example: ShowOff.java (from Java 2D book)

Where Can I Use Java 2D?: 

Where Can I Use Java 2D? Any Java 2 type application Included in Java 1.2 or above Stand-alone rich-client applications Web applications (applets) Servers side generation of dynamic images suchs as maps, charts, etc.

What Are Prerequisites for Using?: 

What Are Prerequisites for Using? Basic Java programming Some OO knowledge Need to have basic grasp of interfaces for: Shape Paint Some exposure to graphics or user interface programing helpful AWT or Swing Graphics in other languages

Think Paint!: 

Think Paint! When using Java 2D, keep in mind the rendering pipeline Nothing is shown until paint is called Must extend an object that is of the Component family Override paint() method No painting – no picture!

When is paint() called for a component?: 

When is paint() called for a component? System triggered: When the component is first shown When it is “damaged” (covered by a window and then uncovered, for example) Component resized App triggered: When a program calls repaint State of button has changed Date (model) has changed

Paint in Swing or AWT Components: 

Paint in Swing or AWT Components For AWT, can override Canvas, Panel paint methods Other things that inherit from Component For Swing Extend JPanel, JButton, etc Other things that inherit from JComponent

How to use in AWT: 

How to use in AWT Extend a component such as Canvas or Panel Override public void paint(Graphics g) If extending a container call super.paint(g) so that children are painted Rest of the discussion uses Swing components

How to use in Swing Components: 

How to use in Swing Components Extend a Swing component such as JPanel Override paintComponent Cast Graphics to Graphics2D so you can use advanced features Make sure you call super.paintComponent(g) as first call! Or funny things happen Ghosts, background wrong

Methods Called for Swing Refresh: 

Methods Called for Swing Refresh In Swing paint() still gets called when it's time to render Work of paint is divided into three methods protected void paintComponent(Graphics g) protected void paintBorder(Graphics g) protected void paintChildren(Graphics g) Generally you only override paintComponent

Basic Java 2D: 

Basic Java 2D public MyBasicDrawPanel extends JPanel { protected void paintComponent(Graphics g) { // Call super.paintComponent! super.paintComponent(g); // Cast Graphics to Graphics2D Graphics2D g2d = (Graphics2D)g; // Draw g2d.setColor(Color.blue); g2d.fillRect(20, 20, 100, 80); } }

Not restricted to JPanel! : 

Not restricted to JPanel! Can also use in JButton, JLabel Custom renderers for JTable JComboBox Etc.

Painting Tips : 

Painting Tips Be polite: trigger a repaint (as when data model changes) by calling repaint not paint Puts a request in the event queue If drawing is complex, try to repaint only the area that needs updating Use void repaint(Rectangle r) not void repaint() (paints the whole thing) For paintComponent method, always call super.paintComponent first! Make use of clipping to enhance performance

Graphics2D object: 

Graphics2D object Java 2D's extension of Graphics object Used to draw Shape objects Has rendering attributes: Pen Style (solid, dotted, dashed) Fill Compositing (used when objects overlap) Transform (scale, rotate, translate, shear) Clip area Font Rendering hints

Graphics2D – setting attributes: 

Graphics2D – setting attributes setStroke setPaint setComposite setTransform setClip setFont setRenderingHints

Graphics2D Rendering Methods: 

Graphics2D Rendering Methods draw renders outline of graphics primitive using stroke and paint attributes fill fills shape with given paint attribute (color or pattern) drawString draw string with given font and paint attribute drawImage draw an image

Shape Interface: 

Shape Interface To draw, use things that implement Shape such as: Area CubicCurve2D GeneralPath Line2D Polygon QuadCurve2D Rectangle RectangularShape These use double's or float's for parameters

Drawing Shapes: 

Drawing Shapes Old AWT way (can still use) drawXxxx fillXxxx OR - Create a Shape object and the draw or fill

Creating Shapes: 

Creating Shapes public void paintComponent(Graphics g) { super.paintComponent(g); Graphics2D g2d = (Graphics2D)g; // Assume x, y, and diameter are instance variables Ellipse2D.Double circle = new Ellipse2D.double(x, y, diameter, diameter); g2d.fill(circle); }

Graphics2D draw and fill: 

Graphics2D draw and fill Arguments to the draw and fill must implement the Shape interface Graphics built using objects rather than instructions

Rectangles, Ellipses and ARcs: 

Rectangles, Ellipses and ARcs Note that many Shape classes have inner constructors Use Rectangle2D inner classes to create: Rectangle2D.Double Retangle2D.Float Ellipse2D: Ellipse2D.Double Ellipse2D.Float Arc2D Arc2D.Double Arc2D.Float See JavaApplet2D.java

Arc2D – three different close types: 

Arc2D – three different close types Open Pie Chord

Lines: 

Lines Create a line using Line2D classes inner class constructors Line2D.Float(), etc. Line2D.Double(), etc. StringArt.java QuadCurve2D 2 end points and a control points CubicCurve2D 2 end points and 2 control points DragKing.java

Bounds/Hit Testing: 

Bounds/Hit Testing Shape has various contains() methods Makes for easy user interaction Java2DApplet.java public void mouseClicked(MouseEvent e) { Point2D point = new Point2D.Double(e.getX(), e.getY()); if (shape.contains(point)) { showMessage(“Hit me!”); } }

Combining Shapes: 

Combining Shapes Combine Shape objects using the Area class Area implements Shape – can draw using Graphics2D Create: new Area() or new Area(Shape s) Combine: public void add(Area a) public void intersect(Area a); public void subtract(Area a); public void exclusiveOr(Area a); CombiningShapes.java

Painting: 

Painting Paint attribute of Graphics2D Goes way beyond the old color attribute (still useable) getPaint, setPaint Used when fill method is called on a shape Arguments to setPaint must implement the Paint interface PaintingAndStroking.java

Paint Classes: 

Paint Classes Color Solid color Same constants as in AWT: Color.red, Color.black, etc. Java2DApplet.java GradientPaint Gradient fill gradually combining two colors Can create your own RoundGradientPaint.java TexturePaint Tiled image TexturePaintFill.java

Compositing: 

Compositing Process of putting two pictures together Every time object is drawn, source and destination combination process is performed Usually use source over destination

Compositing Rules: 

Compositing Rules

Transparency: 

Transparency Assign transparency (alpha) values to drawing operations Underlying graphics show through Call setComposite of Graphics2D object AlphaComposite.getInstance TransparencyExample.java (run-transparency)

Using Local Fonts: 

Using Local Fonts Same logical fonts as in Java 1.1 Serif, SansSerif, Monospaced, Dialog, DialogInput Also, arbitrary local fonts Must lookup entire list May take awhile Use GraphicsEnvironment methods getAvailableFontFamilyNames getAllFonts

Printing All Font Names: 

Printing All Font Names GraphicsEnvironment env = GraphicsEnvironment.getLocalGraphicsEnvironment(); String[] fontNames = env.getAvailableFontFamilyName(); System.out.println("Available Fonts:"); for(int i=0; i<fontNames.length; i++) System.out.println(" " + fontNames[i]);

Drawing With Local Fonts - Example: 

Drawing With Local Fonts - Example Query the available fonts using getAvailableFontNames of GraphicsEnvironment Set the font in the Graphcis2D object Call g2d.drawString method ShowFonts.java

Stroke Styles in Java 2D: 

Stroke Styles in Java 2D In AWT, could only do 1-pixel wide lines, no control over how lines are joined Much more flexibility in Java2D – can specify: Pen thickness Dashing pattern The way line segments are joined together Create a BasicStroke object (several contructors) StrokePanel.java (Java2DApplet.java)

Coordinate Transformations: 

Coordinate Transformations Java 2D allows you to easily Translate Rotate Scale Shear Use java.awt.geom.AffineTransform Example from Java 2D book: Transformers.java and other classes Creates a GeneralPath object Transform using the above operations

Other Capabilities of Java 2D: 

Other Capabilities of Java 2D High-quality printing Improved XOR mode Custom color mixing Fancy text operations Low-level image processing See JavaWorld article: http://www.javaworld.com/javaworld/jw-09-1998/jw-09-media.html (download\media\run.bat) Animation -see example programs: TextBouncer Bouncer

For More Information: 

For More Information Sun's page: http://java.sun.com/products/java-media/2D/ Many of the examples were from this book: Java 2D Graphics by Jonathan Knudsen

Examples From Java SDK: 

Examples From Java SDK Look in: C:\j2sdk1.4.1_02\demo\jfc\Java2D Open Java2Demo.html Source is included

JFreeChart : 

JFreeChart Example of someone using Java2D API Open source Java API For creating charts and graphs Has example of generating chart in servlet Also has demo that shows several different kinds of charts jfreechart-0.9.14-demo.jar https://sourceforge.net/projects/jfreechart/

What is SVG?: 

What is SVG? Scalable Vector Graphics Language for describing two-dimensioal graphics and graphical applications in XML Created by the World Wide Web Consortium (W3C) Over 20 organizations including Sun Microsystems, Adobe, Apple and IBM involved Sun active from the start

SVG Features: 

SVG Features Plain text format (not some complicated binary form) Low band-width Scalable – unlike GIF and JPEG Zoomable – picture just as clear Searchable and selectable text (unlike bitmaps) Scripting and animation Works with Java! Open Standard True XML

SVG on the Web: 

SVG on the Web Can easily be generated on web servers “on the fly” Example: create a high quality, low bandwith stock quote graph SVG can be created: Through a drawing package Or by writing code Or Notepad

How to View: 

How to View Adobe plugin: http://www.adobe.com/svg/viewer/install/ Small and powerful Many examles on their website

SVG Tag Sampling: 

SVG Tag Sampling Shape Tags: <line>, <rect>, <circle>, <ellipse>, <polyline>, <polygon>, <path> Paint Tags: <linearGradient>, <radialGradient>, <pattern>, <mask> Text Tags: <text>, <tspan>, <textPath>, <font>, <font-face>, <glyph> Filter Tags: <filter>, <feBlend>, <feFlood>, <feColorMatrix>, <feGaussianBlur> <feMorphology> <feSpotLight> Animation Tags: <animate>, <animateMotion>, <animateTransform>, <animateColor>, <set> Misc Tags: <image>, <symbol>, <g>, <defs>, <use> And Much More

SVG in Action: 

SVG in Action <svg> <g style="fill-opacity:0.7; stroke:black; stroke-width:0.1cm;"> <circle cx="6cm" cy="2cm" r="100" style="fill:red;" transform="translate(0,50)" /> <circle cx="6cm" cy="2cm" r="100" style="fill:blue;" transform="translate(70,150)" /> <circle cx="6cm" cy="2cm" r="100" style="fill:green;" transform="translate(-70,150)"/> </g> </svg>

Filter Effects: 

Filter Effects

Line Drawing Example: 

Line Drawing Example

Basic SVG Shapes: 

Basic SVG Shapes <line x1="start-x" y1="start-y" x2="end-x" y2="end-y" /> <rect x="left-x" y="top-y" width="width" height="height" /> <circle cx="center-x" cy="center-y" r="radius" /> <ellipse cx="center-x" cy="center-y" rx="x-radius" ry="y-radius" /> <polygon points="points" /> <polyline points="points" />

Line Example: 

Line Example

Fancy SVG Examples: 

Fancy SVG Examples From kevlindev.com: Kaleidoscope carto.net Weather map Fireworks Animated bus track Canvas and Layers

Batik: 

Batik Open source Java API from Apache: http://xml.apache.org/batik/index.html Render SVG files in Java application Write Java 2D to SVG file

Batik Application Modules: 

Batik Application Modules SVG Browser View, zoom, pan an rotate SVG documents SVG Pretty Printer Tidy up messay SVG SVG Font Converter Convert from True Type to SVG font format SVG Rasterizer Convert to and from SVG content

SVG Browser - Squiggle: 

SVG Browser - Squiggle Java program included in Batik release batik-squiggle.jar If Java installed – simple double-click to run Allows you to view SVG files – zoom, search text View many sample SVG files that come with Batik sizeofsun – search for Pluto

Batik Core Modules: 

Batik Core Modules SVG Generator SVGCanvas2D Java 2D “draws” to an SVG file SVG DOM Manipulate SVG documents in a Java program JSVGCanvas Display SVG content in a Java panel Transcoder Save SVG in another format (such as JPEG)

JSVG Canvas: 

JSVG Canvas Use to display SVG in a Java program JSVGCanvasExample.java JSVGCanvas canvas = new JSVGCanvas(); canvas.setURI( new File(fileName).toURL().toString() );

SVG Generator: 

SVG Generator Write any arbitray Java 2D graphics to SVG Can then view in browser with SVG plugin Uses SVGGraphics2D Similar to Grahpics2D in Java 2D Write to an XML file instead of printer or screen

SVG – More Information: 

SVG – More Information http://www.kevlindev.com/ Tutorials Examples Batik http://xml.apache.org/batik/index.html Adobe SVG Zone http://www.adobe.com/svg/main.html Browser plugin Examples SVG Specification http://www.w3.org/TR/SVG/