Advanced user interfaces with java sd 98 session 3206
Download
1 / 45

Advanced User Interfaces with Java - PowerPoint PPT Presentation


  • 389 Views
  • Updated On :

Advanced User Interfaces with Java SD’98 - Session 3206 Ted Faison [email protected] 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

Related searches for Advanced User Interfaces with Java

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Advanced User Interfaces with Java' - niveditha


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Advanced user interfaces with java sd 98 session 3206 l.jpg
Advanced User Interfaces with JavaSD’98 - Session 3206

Ted Faison

[email protected]

Faison Computing Inc.

www.faisoncomputing.com


Jdk 1 2 a better graphics framework l.jpg

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 l.jpg
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 l.jpg
Java 2D API Features

  • Support for separate user and device coordinate spaces

  • Coordinates can be integers, floats or doubles

Device Space

User Space


Java 2d api features5 l.jpg
Java 2D API Features

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

Device Space

User Space


Java 2d api features6 l.jpg
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 features7 l.jpg
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 l.jpg
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 l.jpg
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 transformations10 l.jpg
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 l.jpg
Affine Transforms

  • Maintain straightness and parallelism

  • Translation

    • setToTranslation(double dx, double, dy);

    • used to support graphics scrolling

Device Space

User Space


Affine transforms12 l.jpg
Affine Transforms

  • Rotation

    • Rotating about the origin

      • setToRotation(double theta);

Device Space

User Space


Affine transforms13 l.jpg
Affine Transforms

  • Rotation about an arbitrary point

    • SetToRotation(theta, x, y);

(x, y)

(x, y)

Device Space

User Space


Affine transforms14 l.jpg
Affine Transforms

  • Shearing

    • setToShear(double sh, double sy)

Device Space

User Space


Affine transforms15 l.jpg
Affine Transforms

  • Scaling

    • setToScale(double sx, double sy)

    • anisotropic vs isotropic scaling

Device Space

User Space


Using class affinetransform l.jpg
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 transforms17 l.jpg
Affine Transforms

  • Handling transformed images with offscreen buffers

    • Examples

      • ScalingImages.java

      • RotatingImages.java

      • ShearingImages.java


Drawing with paths l.jpg
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 l.jpg
Bezier curves

  • Used by the 2D API for cubic curves.

  • Defined by simple control points


Drawing a straight line l.jpg
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 l.jpg
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 pattern l.jpg
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 an image l.jpg
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 a gradient l.jpg
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 l.jpg
Custom Strokes

  • Class BasicStroke

    • simple to use

    • define common stroke properties

      • width

      • end caps

      • line joins

      • dash attributes


Defining a custom stroke l.jpg
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 l.jpg
2D Drawing Shortcuts

  • interface Rectangle2D

    • Rectangle2D.Float

    • Rectangle2D.Double

  • RoundRectangle2D

  • Arc2D

  • Ellipse2D


Clipping l.jpg
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 text l.jpg
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);



Blending objects l.jpg
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 l.jpg
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 l.jpg
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






Conclusion l.jpg
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


ad