Draw a shape with a different color (JavaFX)
richardxmercado
CSC255-JavaFX_3_Graphic2D_v1.pdf
JAVAFX SHAPES – 2D PROFESSOR SYLVIA YEUNG
SHAPES
2
JavaFX provides many shape classes for drawing texts,
lines, circles, rectangles, ellipses, arcs, polygons, and
polylines.
DISPLAY A SHAPE
THIS EXAMPLE DISPLAYS A CIRCLE IN THE CENTER OF THE PANE.
3
(0, 0) X Axis
Y Axis
(x, y)
x
y
Java
Coordinate
System
X Axis
Conventional
Coordinate System
(0, 0)
Y Axis
TEXT
4
5
6
7
TEXT EXAMPLE
8
10
11
GETSTROKEDASHARRAY
• DEFINES THE ARRAY REPRESENTING THE LENGTHS OF THE DASH SEGMENTS. ALTERNATE ENTRIES IN THE ARRAY REPRESENT THE USER
SPACE LENGTHS OF THE OPAQUE AND TRANSPARENT SEGMENTS OF THE DASHES.
• As the pen moves along the outline of the Shape to be stroked, the user space distance that the pen travels is accumulated.
The distance value is used to index into the dash array.
• An empty strokeDashArray indicates a solid line with no spaces. An odd length strokeDashArray behaves the same as an even
length array constructed by implicitly repeating the indicated odd length array twice in succession ([20, 5, 15] behaves as if it were [20, 5, 15, 20, 5, 15]).
• Note that each dash segment will be capped by the decoration specified by the current stroke line cap.
• The image shows a shape with stroke dash array [25, 20, 5, 20] and 3 different values for the stroke line
cap: StrokeLineCap.BUTT, StrokeLineCap.SQUARE (the default), and StrokeLineCap.ROUND
•
RECTANGLE
13
RECTANGLE EXAMPLE
14
15
CIRCLE
16
A CIRCLE IS NOT DISPLAYED IN THE CENTER OF THE SCENE
17
BINDING PROPERTY: GETTER, SETTER, AND PROPERTY GETTER
18
THE CIRCLE IS CENTERED AFTER THE WINDOW IS RESIZED.
19
ELLIPSE
20
(centerX, centerY)
radiusY
radiusX
21
THE ELLIPSE IS CENTERED AFTER THE WINDOW IS RESIZED.
ARC
23
ARC EXAMPLES
24
(centerX, centerY)
radiusX
radiusY
length
startAngle
0 degree
(a) Negative starting angle –30° and
negative spanning angle –20° (b) Negative starting angle –50°
and positive spanning angle 20°
–30°
–20°
–50°
20°
25
POLYGON AND POLYLINE
26
POLYGON
27
javafx.scene.shape.Polygon
+Polygon()
+Polygon(double... points)
+getPoints():
ObservableList<Double>
Creates an empty polygon.
Creates a polygon with the given points.
Returns a list of double values as x- and y-coordinates of the points.
The getter and setter methods for property values and a getter for property
itself are provided in the class, but omitted in the UML diagram for brevity.
28
2D SHAPE – PATH ELEMENT CUBIC CURVE
• The path element cubic curve is used to draw a cubic curve to a point in the specified coordinates
from the current position.
• It is represented by a class named CubicCurveTo. This class belongs to the
package javafx.scene.shape.
STEPS TO DRAW PATHELEMENT CUBIC CURVE
1. Create the Path class object
2. Create a Move To Path
3. Creating an Object of the Class CubicCurveTo
4. Setting Properties to the Cubic Curve Element
5. Adding Elements to the Observable List of Path Class
EXAMPLE
LISTENERS FOR OBSERVABLE OBJECTS
YOU CAN ADD A LISTENER TO PROCESS A VALUE CHANGE IN AN
OBSERVABLE OBJECT.
AN INSTANCE OF OBSERVABLE IS KNOWN AS AN OBSERVABLE OBJECT,
WHICH CONTAINS THE ADDLISTENER(INVALIDATIONLISTENER
LISTENER) METHOD FOR ADDING A LISTENER.
ONCE THE VALUE IS CHANGED IN THE PROPERTY, A LISTENER IS
NOTIFIED. THE LISTENER CLASS SHOULD IMPLEMENT THE
INVALIDATIONLISTENER INTERFACE, WHICH USES THE
INVALIDATED(OBSERVABLE O) METHOD TO HANDLE THE PROPERTY
VALUE CHANGE. EVERY BINDING PROPERTY IS AN INSTANCE OF
OBSERVABLE.
32
33
The program registers the listeners for
the stack pane’s width and height
properties. When the user resizes the
window, the pane’s size is changed, so
the listeners are called to invoke the
resize() method to change the size of the
circle and rectangle
