Shapes

Shapes

Shape Class

•

Shape class inherits from Node class

•

Several classes inherit from shape class

•

Can be used to draw objects to the screen

•

http://

docs.oracle.com/javafx/2/api/javafx/scene/sha

pe/Shape.html

•

Most methods in shape class

– _{Stroke of shape} – _{Fill of shape}

Line

•

Line class is used to draw lines

•

Subclass of shape class

•

Has a start point and end point

– _{startX, endX, startY, endY}

Example - LineExample.java

•

LineExample.java

– _{Shown in the next few slides}

Line Code

@Override

public void start(Stage mainFrame) {

//sx, sy, ex, ey

Line line1 = new Line(0.0, 0.0, 200, 200);

Pane drawingPane = new Pane();

drawingPane.getChildren().add(line1);

scene = new Scene(drawingPane, 300, 300); mainFrame.setScene(scene);

Line Image

Point (0, 0)

Point (50, 50)

X Y

Line Options

•

Can make line thinker

– _{Ex: line1.setStrokeWidth(4)}

•

Can make line colored

– _{Ex: line1.setStroke(Color.RED)}

Centering the line

•

Find width and height of the panel

•

Subtract the width of the line from the width of

the panel

•

Subtract the height of the line from the height of

the panel

•

Take half the x and y distance and add to the

starting point

•

Take the other half and subtract from the end

point

Center Line Code

double xDifference = drawingPane.getWidth() - Math.abs(line1.getStartX() - line1.getEndX());

double yDifference = drawingPane.getHeight() - Math.abs(line1.getStartY() - line1.getEndY());

Line Image 2

Scalable Line

•

Bind points of line to relative points on the

pane

•

Need to get the line point properties

•

Need to call bind for those properties

Scalable Line

•

Start with our existing code from the previous

example

•

Bind the points after setting them

– _{Start points will not change}

•

Changes

– _{The line will scale with the screen}

– _{The line distance will not be kept constant}

Scalable Line Code

line1.endXProperty().bind(drawingPane.widthPr

operty().subtract(.5*xDifference));

line1.endYProperty().bind(drawingPane.heightP

roperty().subtract(.5*yDifference));

Scalable Line Image 2

Polyline

•

Connect a bunch of points

•

Shape does not have to be closed

•

Holds a list of points

– _{X1, y1, x2, y2, x3, y3, etc…}

•

http://

Example - PolylineExample.java

•

PolylineExample.java

– _{Shown in the next few slides}

Polyline Example Code

Smarter Code

double startX = 10.0; double startY = 10.0; double increment = 50.0;

for(int i=0; i<16; i++) {

if(i%4 == 0) {

polyline1.getPoints().add(startX); polyline1.getPoints().add(startY); }

else if(i%4 == 1) {

polyline1.getPoints().add(startX);

polyline1.getPoints().add(startY + increment); }

//continued on next slide

Smarter Code Continued

else if(i%4 == 2) {

polyline1.getPoints().add(startX + increment); polyline1.getPoints().add(startY + increment); }

else if(i%4 == 3) {

polyline1.getPoints().add(startX + increment); polyline1.getPoints().add(startY);

startX = startX + increment + increment; }

Polyline Image

Line Properties

•

Just like lines

•

Can set stroke color

– _{polyline1.setStroke(Color.BLUE);}

•

Can set stroke width

Polyline Image 2

Text

•

Can draw text anywhere on the panel

•

Text starts at point specified

•

Can set various text properties

– _{Font, size, color}

•

http://

Example – TextExample.java

•

TextExample.java

– _{Example shown in next few slides}

Text Code

@Override

public void start(Stage mainFrame) {

Text textPiece = new Text(10, 10, "String of text");

Pane drawingPane = new Pane();

drawingPane.getChildren().add(textPiece); scene = new Scene(drawingPane, 300, 300);

mainFrame.setScene(scene); mainFrame.show();

Text Image

Text Properties

•

Font

– _{textPiece.setFont(Font.font("Times New Roman",}

FontWeight.BOLD, FontPosture.REGULAR, 20));

•

Underline

– _{textPiece.setUnderline(true);}

•

Color

Text Image 2

Centering Text

•

Get total width of text

– _{textPiece.getLayoutBounds().getWidth()}

•

Get total height of text

– _{textPiece.getLayoutBounds().getHeight()}

•

Get total width of pane

– _{drawingPane.getWidth()}

•

Get total height of pane

Centering Text

•

Subtract off the width of the text from the total

panel width

•

Subtract off the height of the text from the

total panel height

•

Set the start x value to half the width

difference

•

Set the start y value to half the height

difference

Centering Text Code

double textWidth = textPiece.getLayoutBounds().getWidth(); double textHeight = textPiece.getLayoutBounds().getHeight(); double differenceX = drawingPane.getWidth() - textWidth; double differenceY = drawingPane.getHeight() - textHeight;

Centered Text Image

Dimension Notes

•

Everything is sized when the scene size is set

– _{scene = new Scene(drawingPane, 300, 300);}

•

Before that line of code everything has no

width or height

Rectangle

•

Can create rectangles

•

Can specify

– _{Upper left corner location} – _Width

– _Height – _{Fill color}

– _{Border color}

– Corner type (pointy / curved)

– _http://

docs.oracle.com/javafx/2/api/javafx/scene/shape/R

Example - RectangleExample.java

•

RectangleExample.java

Rectangle Code

• _{Create rectangle}

– _{Rectangle rectangle1= new Rectangle(50, 50, 100, 100);} – (x, y, width, height)

•

Set Border Width

– _{rectangle1.setStrokeWidth(4);}

•

Set Border Color

– _{rectangle1.setStroke(Color.RED);}

•

Set Fill Color

– _{rectangle1.setFill(Color.BLUE);}

Circle Code

•

Create Circle

– _{Circle circle1 = new Circle(150, 150, 100);} – _{Center x, center y, radius}

•

Set fill

– _{Same for all shapes}

– _{circle1.setFill(Color.BLUE);}

•

http://

docs.oracle.com/javafx/2/api/javafx/scene/sha

pe/Circle.html

Example - CircleExample.java

•

CircleExample.java

– _{Example shown in next few slides}

Multiple Circles

• _{Create circles with the same center point} • _{Choose different size radii}

Multiple Circles Continued

• _{Choose a different fill color for each circle}

Multiple Circles Continued

• _{Add the circles to the pane}

• _{The largest circle should be added first} • _{The circles added last will display on top}

Multiple Circles Image

Ellipse

•

Defined by a center point and 2 radii

– _{Ellipse ellipse1 = new Ellipse(150, 150, 30, 60);}

•

Everything else is similar to other shapes

•

http://

Ellipse Image

Example - ShapeExample6.java

Polygon

•

Similar to polyline class

•

Shape is automatically closed

•

http://

docs.oracle.com/javafx/2/api/javafx/scene/sha

pe/Polygon.html

•

Next example will reuse the same exact

polyline code and add a fill color

– _{Will change polyline to polygon}

Example - PolygonExample.java

•

PolygonExample.java

Polyline Image

Compound Shape Example

Example - CompoundExample.java