CHAPTER

13
JavaFX:
Graphics,
Effects,
and Media

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 Topics
• Drawing Shapes
• Animation
• Effects
• Playing Sound Files
• Playing Videos
• Handling Key Events
• Handling Mouse Events

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 Drawing Shapes
• Screen Coordinate System
• The location of each pixel in an application's window
is identified with an X coordinate and a Y coordinate.
• The coordinates are usually written in the form
(X, Y).
• Unlike Cartesian coordinates, the upper-left corner of
a drawing area is (0, 0).
• The X coordinates increase from left to right, and the
Y coordinates increase from top to bottom.
• When drawing a line or shape on a component, you
must indicate its position using X and Y coordinates.
Copyright © 2018 Pearson Education, Inc. All Rights
Reserved.
 Drawing Shapes

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 The Shape Class and its
Subclasses
• The Shape class (in the javafx.scene.shape
package) provides the basic functionality for drawing
shapes.
• The Shape class has several subclasses, each of which
draws a specific shape.

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 The Shape Class and its
Subclasses
• You draw shapes with these classes by following this
general procedure:

1. Create an instance of the desired shape class.

2. Repeat step 1 for each shape that you want to draw.
3. Add all of the shape objects that you created to a container.
4. Add the container to the scene graph.

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 The Line Class
• Constructors

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 The Line Class
• The following statement creates a line starting at
(80, 120) and ending at (400, 520):

Line myLine = new Line(80, 120, 400, 520);

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 The Line Class
• No-arg constructor: Here is an example
that creates a line starting at (0, 0) and
ending at (200, 200):

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 Triangle.java
import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.shape.Line;

public class Triangle extends Application

{
public static void main(String[] args)
{
launch(args);
}

@Override
public void start(Stage primaryStage)
{
// Constants for the scene size
final double SCENE_WIDTH = 320.0;
final double SCENE_HEIGHT = 240.0;

// Constants for the triangle corners.

final double TOP_X = 160.0;
final double TOP_Y = 20.0;
final double BOTTOM_RIGHT_X = 310.0;
final double BOTTOM_RIGHT_Y = 220.0;
final double BOTTOM_LEFT_X = 20.0;
final double BOTTOM_LEFT_Y = 220.0; Continued…
Copyright © 2018 Pearson Education, Inc. All Rights
Reserved.
 // Draw the first line, from the top of the triangle
// to the bottom-right corner.
Line line1 = new Line(TOP_X, TOP_Y, BOTTOM_RIGHT_X, BOTTOM_RIGHT_Y);

// Draw the second line, from the top of the triangle

// to the bottom-left corner.
Line line2 = new Line(TOP_X, TOP_Y, BOTTOM_LEFT_X, BOTTOM_LEFT_Y);

// Draw the third line, from the bottom-left corner

// of the triangle to the bottom-right corner.
Line line3 = new Line(BOTTOM_LEFT_X, BOTTOM_LEFT_Y,
BOTTOM_RIGHT_X, BOTTOM_RIGHT_Y);

// Add the lines to a Pane.

Pane pane = new Pane(line1, line2, line3);

// Create a Scene and display it.

Scene scene = new Scene(pane, SCENE_WIDTH, SCENE_HEIGHT);
primaryStage.setScene(scene);
primaryStage.show();
}
}

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 Changing the Stroke Color
• The default color of lines and other shapes is black.

• To change a shape’s color call the setStroke method,

which is inherited from the Shape class.

• The general format is

setStroke(color)

• The color argument is usually a Color class constant, such

as Color.RED, Color.Blue, etc.

• The Color class is in the javafx.scene.paint package

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 Changing the Stroke Color
• Example:

Line myLine = new Line(80, 120, 400, 520);

myLine.setStroke(Color.RED);

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 The Circle Class
• See Table 13-3 for a summary of the constructors.

• The following code creates a circle with its center point

at (75, 100), a radius of 50, and filled with the color red:

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 The Circle Class
• The following code draws a black outline of a circle with
no fill color:

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 The Rectangle Class
• See Table 13-4 for a summary of the constructors.

• The following statement creates a rectangle with its

upper-left corner at (200, 100), with a width of 75 and a
height of 150:

Rectangle myRectangle = new Rectangle(200, 100, 75,

150);

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 The Rectangle Class
• The following code creates a rectangle with its upper-left
corner at (10, 20), a width of 50, a height of 100, and
filled with the color dark green:

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 The Ellipse Class
• See Table 13-5 for a summary of the constructors.

• The following statement creates an ellipse its center

located at (320, 240), an X-radius of 140 pixels, and a Y-
radius of 100:

Ellipse myEllipse = new Ellipse(320, 240, 140, 100);

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 The Rectangle Class
• The following code creates an ellipse with its center point
at (125, 100), an X-radius of 130, a Y-radius of 90, no fill
color, and a stroke color of black:

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 The Arc Class
• Constructors

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 The Arc Class
• Arc Properties

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 The Arc Class
• Types of Arcs

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 The Arc Class
• The following code creates an arc with its center point at
(160, 120), an X-radius of 100, a Y-radius of 100,
beginning at 0 degrees, with a length of 34 degrees,
filled with the color red. The arc will resemble a pie-slice
because the type of arc is ArcType.ROUND:

Arc myArc = new Arc(160.0, 120.0, 100, 100.0, 0.0,

45.0);
myArc.setFill(Color.RED);
myArc.setType(ArcType.ROUND);

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 The Polygon Class
• Constructors

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 The Polygon Class
• Example

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 The Polygon Class
• Example

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 The Polyline Class
• Constructors

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 The Polygon Class
• Example

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 From PolyLineDemo.java in your textbook

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 The Text Class
• Constructors

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 The Text Class
• The following code draws the string “Hello World”,
starting at the coordinates 100, 50:

Text myText = new Text(100.0, 50.0, "Hello World");

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 The Text Class
• You can set the font with the setFont method. This
method accepts a Font object as its argument.

• The Font class is in the javafx.scene.text

package.

• When you instantiate the Font class, you pass the name
of a font and the font’s size, in points, as arguments to
the constructor:

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 Rotating Nodes
• The Node class provides a method named setRotate
that rotates a node about its center.
• Because the setRotate method is in the Node class, it
can be used to rotate any node in your scene graph

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 Scaling Nodes
• The Node class also provides methods named
setScaleX and setScaleY that scale a node in its X
and Y dimensions.

• Because these methods are in the Node class, they can

be used to scale any node in your scene graph.

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 Scaling Nodes
// Constants for the text
final double X1 = 30.0, Y1 = 100.0;
final double X2 = 30.0, Y2 = 130.0;
final double X3 = 30.0, Y3 = 150.0;
final double FONT_SIZE = 38;
final double SCALE_HALF = 0.5;
final double SCALE_QTR = 0.25;

Text text1 = new Text(X1, Y1, "Hello World");

text1.setFont(new Font("SansSerif",
FONT_SIZE));

Text text2 = new Text(X2, Y2, "Hello World");

text2.setFont(new Font("SansSerif",
FONT_SIZE));
text2.setScaleX(SCALE_HALF);
text2.setScaleY(SCALE_HALF);

Text text3 = new Text(X3, Y3, "Hello World");

text3.setFont(new Font("SansSerif",
FONT_SIZE));
Copyright © 2018 Pearson Education, Inc. All Rights
text3.setScaleX(SCALE_QTR);
Reserved.
 Animation
• JavaFX provides transition classes that create
animations by causing a node to change, over
time, from one state to another.

• The transition classes are in the

javafx.animation package.

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 Animation
• Some of the transition classes:

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 Animation
• All of the transition classes work in a similar manner. For
each class, you designate the following:

• The node that you want to animate

• The amount of time that the animation will last
• The node’s starting state (depends on the type of animation)
• The node’s ending state (depends on the type of animation)

• Once you have everything properly setup, you call the

transition class’s play method to play the animation.

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 The TranslateTransition
Class
• Constructors:

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 The Duration Class
• You use a Duration object to specify the amount of
time that an animation should last.

• The Duration class, (in the javafx.util package),

represents a duration of time.

• When you instantiate the Duration class, you pass a

number of milliseconds to the constructor.

• A millisecond is 1/1000th of a second, so passing the

value 1000 to the Duration class constructor will create
an object that represents a duration of 1 second.

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 The TranslateTransition
Class
• This code creates a Circle, and a TranslateTransition
object to animate it.
• The duration of the animation is 3 seconds.
• The Circle object will start at (0, 50), and will move to (100, 50). It
will take 3 seconds for the Circle object to complete the move.

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 The TranslateTransition
Class
• The values you pass to setToX and setToY are the coordinates
for the node’s ending position.
• If you prefer, you can call setByX and setByY to specify the
distance that the node should move, relative to its starting position:

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 The RotateTransition
Class
• Constructors:

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 The RotateTransition
Class
• This code creates a Line, and a RotateTransition object to
animate it.
• The duration of the animation is 3 seconds.
• The Line object will be angled, initially, at 0 degrees, and it will
rotate to the 90 degree position. It will take 3 seconds for the Line
object to complete the rotation.

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 The RotateTransition
Class
• The value you pass to setToAngle is the node's ending angle.
• If you prefer, you can call setByAngle to specify the amount of
rotation:

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
The ScaleTransition Class
• Constructors:

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 The ScaleTransition Class
• This code creates a Circle, and a ScaleTransition object to animate
it.
• The duration of the animation is 2 seconds.
• The Circle object's center point is (50, 50) and its radius is 10. The circle
will be displayed with a starting scale factor of 1 (along both the X and Y
axes), and it will increase in size to a scale factor of 3 (along both the X and
Y axes).

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 The StrokeTransition
Class
• Constructors:

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved. Continued…
 The StrokeTransition
Class
• Constructors (continued):

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 The StrokeTransition
Class
• This code creates a Circle, and a StrokeTransition object to animate
it.
• The duration of the animation is 2 seconds.
• The Circle object's center point is (50, 50) and its radius is 10. The circle
will be displayed with a starting stroke color of yellow, and it will gradually
change the stroke color to green.

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 The FillTransition Class
• Constructors:

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved. Continued…
 The FillTransition Class
• Constructors (continued):

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 The FillTransition Class
• This code creates a Circle, and a FillTransition object to animate it.
• The duration of the animation is 2 seconds.
• The Circle object's center point is (50, 50) and its radius is 10. The circle
will be displayed with a starting fill color of light blue, and it will gradually
change the fill color to dark blue.

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 The FadeTransition Class
• Constructors:

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved. Continued…
 The FadeTransition Class
• This code creates an Image component and an ImageView component to
display an image, and a FadeTransition object to animate the
ImageView.
• The duration of the animation is 1 second.
• The image will be displayed with an opacity of 1.0 (completely opaque). As
the animation plays, the image’s opacity will gradually decrease to 0.25
(twenty-five percent opaque).

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
Miscellaneous Methods Inherited
From the Animation Class

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 Specifying an Interpolator
• The transition classes have a setInterpolator
method that allows you to specify how the animation
begins and ends. The general format for the method is

transitionObject.setInterpolator(interpolatorValue
);

where transitionObject is a transition object, and

interpolatorValue is usually one of the constants
listed in Table 13-19.

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 Specifying an Interpolator

The Interpolator class is in the javafx.animation.Interpolator

package.
Copyright © 2018 Pearson Education, Inc. All Rights
Reserved.
 Specifying an Interpolator
• This code creates a Circle, and a TranslateTransition object to
animate it.
• The duration of the animation is 3 seconds.
• The Circle object will start at (0, 50), and will move to (100, 50). Because
the interpolator is set to Interpolator.EASE_IN, the animation will start
slowly, but end abruptly.

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 Effects
• Classes for applying special effects to nodes

Theses classes are in the javafx.scene.effect

Copyright © 2018 Pearson Education, Inc. All Rights
package.
Reserved.
 The DropShadow Class
• Create a shadow behind a node, giving it the
appearance of being raised above a surface.

See Table 13-21 for more DropShadow class methods

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 The InnerShadow Class
• Create a shadow on the inside edge of a node, giving it a
recessed appearance.

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 The ColorAdjust Class
• Adjust a node’s hue, saturation, brightness, and contrast,
at the pixel level. Original

Color Adjusted

See Table 13-22 for more about ColorAdjust class methods

Copyright © 2018 Pearson Education, Inc. All Rights
Reserved.
 The Blur Classes
• Makes a node appear blurry, out of focus
• BoxBlur uses an algorithm in which a pixel’s value is
recalculated as the average of the values of
neighboring pixels within an imaginary box

• GaussianBlur makes a smoother blur than

BoxBlur, but takes more time

• MotionBlur blurs pixels in a specific direction, to

create the illusion of motion

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 BoxBlur

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 GuassianBlur

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 MotionBlur

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 The SepiaTone Class
• Gives an image an antique, sepia tone
appearance

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 The Glow Class
• Produces a glowing effect

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 The Reflection Class
• Creates a reflection of a node

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 Playing Sound Files
• You use the Media and MediaPlayer classes to play
sound files.

• The Media class loads a sound file into memory.

• The MediaPlayer class provides methods for playing

the sound file.

• These classes are in the javafx.scene.media

package.

• JavaFX supports the .AIF, .MP3, .WAV file formats.

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 Playing Sound Files

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 Playing Sound Files
• The following code loads the file guitar.wav and plays
it as soon as the file is loaded and the MediaPlayer is
ready:

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 Playing Videos
• Use the Media, MediaPlayer, and MediaView classes to play
videos.

• The Media class loads a video file into memory.

•
The MediaPlayer class provides methods for playing the
video.

• The MediaView class can be inserted into the scene graph,

providing a way to see the video on the screen

• These classes are in the javafx.scene.media package.

• JavaFX supports the .FLV and .MP4 file formats.

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 Playing Videos
• See VideoDemo.java in your textbook for a
demonstration

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 Handling Key Events
• Key events are events that are generated by the
keyboard.

• Any time the user presses a key, a KEY_PRESSED event occurs.

• Any time the user releases a key, a KEY_RELEASED event
occurs.
• Any time the user presses and releases a key that produces a
Unicode character, such as a letter of the alphabet, a numeric
digit, or a punctuation symbol, a KEY_TYPED event occurs.

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 Handling Key Events
• General format of an event handler class that handles
event objects of the KeyEvent type:

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 Handling Key Events
• In most cases, you will want to register your KeyEvent
handlers with the Scene object.

• That way, your KeyEvent handlers will respond to key

events, regardless of which node has the input focus.

• To register a key event handler, you will call one of the

following methods on the Scene object (or any node in the
scene graph):

• setOnKeyPressed
• setOnKeyReleased
• setOnKeyTyped

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 Handling Key Events
• Using a lambda expression to register a KEY_PRESSED
event handler with the Scene object:

• See KeyPressedDemo.java in your textbook

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 Handling Mouse Events
• Mouse events are events that are generated by the
mouse.

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 Handling Mouse Events
• To register a mouse event handler, you will call one of
the following methods on the node that should handle
the event:

• setOnMouseClicked
• setOnMouseDragged
• setOnMouseEntered
• setOnMouseExited
• setOnMouseMoved
• setOnMousePressed
• setOnMouseReleased

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.
 Handling Mouse Events
• See the following programs in your textbook:

• MouseEventDemo.java
• MouseMovedDemo.java
• MouseDraggedDemo.java

Copyright © 2018 Pearson Education, Inc. All Rights

Reserved.