17. Intersect, subtract and union

We can use the static Path methods, intersect, subtract and union, to perform different operations with 2 shapes.

Here they are applied to 3 circle and 3 rectangles, with overlap. The intersect will result in the lowest area, while union with the most.

---

package ex17;

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Path;
import javafx.scene.shape.Rectangle;
import javafx.scene.shape.Shape;
import javafx.stage.Stage;

public class Ex17 extends Application {
    
    @Override
    public void start(Stage primaryStage) {
        
        Group root = new Group();
        
        double w = 50, rad = 25, x = 100, y = 100;
        
        Circle circ1 = new Circle(x, y, rad);
        Circle circ2 = new Circle(2*x, y, rad);
        Circle circ3 = new Circle(3*x, y, rad);
        Rectangle rect1 = new Rectangle(x, y, w, w);
        Rectangle rect2 = new Rectangle(2*x, y, w, w);
        Rectangle rect3 = new Rectangle(3*x, y, w, w);
        
        Shape intersect = Path.intersect(rect1, circ1);
        intersect.setFill(Color.RED);
        Shape subtract = Path.subtract(rect2, circ2);
        subtract.setFill(Color.RED);
        Shape union = Path.union(rect3, circ3);
        union.setFill(Color.RED);
        
        root.getChildren().addAll(intersect, subtract, union);
        
        Scene scene = new Scene(root, 400, 300, Color.HONEYDEW);
        
        primaryStage.setTitle("Example 17. Intersect, subtract, and union");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

---

This is the output:

---

16. Group

Two circles, with different radius and color, are drawn using Group layout.

In the Group layout, the positions, specified in the constructors, are followed.

---

package ex16;

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;

public class Ex16 extends Application {
    
    @Override
    public void start(Stage primaryStage) {
        
        Group root = new Group();
        
        Circle circ1 = new Circle(100, 100, 50, Color.RED);
        Circle circ2 = new Circle(200, 200, 25, Color.BLUE);
        root.getChildren().addAll(circ1, circ2);
        
        Scene scene = new Scene(root, 400, 400, Color.HONEYDEW);
        
        primaryStage.setTitle("Example 16. Group");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

---

This is the output:

---

15. VBox

Two circles, with different radius and color, are drawn using VBox layout.

The circle are laid vertically, with a spacing of 10 as defined in the constructor.

---

package ex15;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;

public class Ex15 extends Application {
    
    @Override
    public void start(Stage primaryStage) {
        
        VBox root = new VBox(10);
        
        Circle circ1 = new Circle(100, 100, 50, Color.RED);
        Circle circ2 = new Circle(200, 200, 25, Color.BLUE);
        root.getChildren().addAll(circ1, circ2);
        
        Scene scene = new Scene(root, 400, 400, Color.HONEYDEW);
        
        primaryStage.setTitle("Example 15. VBox");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

---

This is the output:

---

14. HBox

Two circles, with different radius and color, are drawn using HBox layout.

The circles are laid horizontally with a width of 10 between them.

---

package ex13;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;

public class Ex13 extends Application {
    
    @Override
    public void start(Stage primaryStage) {
        
        StackPane root = new StackPane();
        
        Circle circ1 = new Circle(100, 100, 50, Color.RED);
        Circle circ2 = new Circle(200, 200, 25, Color.BLUE);
        root.getChildren().addAll(circ1, circ2);
        
        Scene scene = new Scene(root, 400, 400, Color.HONEYDEW);
        
        primaryStage.setTitle("Example 13. StackPane");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

---

This is the output:

---

13. StackPane

Two circles, with different radius and color, are drawn using StackPane layout.

The default alignment is center of parent.

---

package ex13;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;

public class Ex13 extends Application {
    
    @Override
    public void start(Stage primaryStage) {
        
        StackPane root = new StackPane();
        
        Circle circ1 = new Circle(100, 100, 50, Color.RED);
        Circle circ2 = new Circle(200, 200, 25, Color.BLUE);
        root.getChildren().addAll(circ1, circ2);
        
        Scene scene = new Scene(root, 400, 400, Color.HONEYDEW);
        
        primaryStage.setTitle("Example 13. StackPane");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

---

This is the output:

---

12. Path

With a Path object, we can create a complicated shape.

Here we use 2 QuadCurveTo objects, 1 CubicCurveTo object, and 2 ArcTo objects. In addition, we set a starting point, for the entire Path, using MoveTo. Unlike the nonpath objects with similar names, we only give ending point, as the start point is given by last path object.

---

package ex12;

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.ArcTo;
import javafx.scene.shape.CubicCurveTo;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;
import javafx.scene.shape.QuadCurveTo;
import javafx.stage.Stage;

public class Ex12 extends Application {
    
    @Override
    public void start(Stage primaryStage) {
        
        Path path = new Path();
        
        MoveTo st = new MoveTo(100,200);
        QuadCurveTo q1 = new QuadCurveTo();
        q1.setControlX(100); q1.setControlY(100);
        q1.setX(200); q1.setY(100);

        CubicCurveTo c = new CubicCurveTo();
        c.setControlX1(200); c.setControlY1(0);
        c.setControlX2(300); c.setControlY2(0);
        c.setX(300); c.setY(100);
        
        QuadCurveTo q2 = new QuadCurveTo();
        q2.setControlX(400); q2.setControlY(100);
        q2.setX(400); q2.setY(200);
        
        ArcTo a1 = new ArcTo();
        a1.setRadiusX(150); a1.setRadiusY(150);
        a1.setX(250); a1.setY(350);
        
        ArcTo a2 = new ArcTo();
        a2.setRadiusX(150); a2.setRadiusY(150);
        a2.setX(100); a2.setY(200);
        
        path.setFill(Color.CORAL);
        path.getElements().addAll(st, q1, c, q2, a1, a2);
        path.setStrokeWidth(10);
        path.setStroke(Color.LIGHTSEAGREEN);
        
        Group root = new Group();
        root.getChildren().addAll(path);
        
        Scene scene = new Scene(root, 500, 400, Color.HONEYDEW);
        
        primaryStage.setTitle("Example 12. Path");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

---

This is the output:

---

11. Text

A 3-line text is placed on the window using the Text class, with the font family "Georgia" at font size of 50.

We use the newline to split the string into 3 lines.

---

package ex11;

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.stage.Stage;

public class Ex11 extends Application {
    
    @Override
    public void start(Stage primaryStage) {
        
        Text text = new Text(10,60,"Hello\nText\nWorld!");
        text.setFont(new Font("Georgia",50));
        
        Group root = new Group();
        root.getChildren().addAll(text);
        
        Scene scene = new Scene(root, 400, 200, Color.HONEYDEW);
        
        primaryStage.setTitle("Example 11. Text");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

---

This is the output:

---

10. Polyline

Here, a polyline is used. Seven vertices with xy coordinates, stored in a double array, are sent in the constructor.

This corresponds to 6 lines, with 4 lines (first four lines or first 5 vertices) forming a W line shape.

---

package ex10;

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Polyline;
import javafx.stage.Stage;

public class Ex10 extends Application {
    
    @Override
    public void start(Stage primaryStage) {
        
        double x = 200, y = 200, w = 100;
        
        double[] vertData = {   x-2*w, y-w,
                                x-w, y+w,
                                x, y-w,
                                x+w, y+w,
                                x+2*w, y-w,
                                x, 0,
                                x-2*w, y-w};
        
        Polyline polyline = new Polyline(vertData);
        polyline.setFill(Color.rgb(1, 225, 80));
                
        Group root = new Group();
        root.getChildren().addAll(polyline);
        
        Scene scene = new Scene(root, 400, 400, Color.PALEGREEN);
        
        primaryStage.setTitle("Example 10. Polyline");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

---

This is the output:

---

9. 4 Triangles

Four triangles are drawn using the Polygon class. Since we pass 6 values into the constructor, this corresponds to 3 vertices.

The four triangles have a common point (x,y) or (200, 200), with a different color. The four are defined counterclockwise, with poly1 at upper-right, with color of red.

---

package ex09;

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Polygon;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;

public class Ex09 extends Application {
    
    @Override
    public void start(Stage primaryStage) {
        
        double x = 200, y = 200, w = 100;
        
        double[] triangle1 = {x,y, x+w,y, x,y-w};
        Polygon poly1 = new Polygon(triangle1);
        poly1.setFill(Color.RED);
        
        double[] triangle2 = {x,y, x,y-w, x-100,y};
        Polygon poly2 = new Polygon(triangle2);
        poly2.setFill(Color.GREEN);
        
        double[] triangle3 = {x,y, x-w,y, x,y+w};
        Polygon poly3 = new Polygon(triangle3);
        poly3.setFill(Color.BLUE);
        
        double[] triangle4 = {x,y, x+w,y, x,y+w};
        Polygon poly4 = new Polygon(triangle4);
        poly4.setFill(Color.FUCHSIA);
        
        Group root = new Group();
        root.getChildren().addAll(poly1,poly2,poly3,poly4);
        
        Scene scene = new Scene(root, 400, 400, Color.GHOSTWHITE);
        
        primaryStage.setTitle("Example 9. 4 Triangles");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

---

This is the output:

---

8. 2 Rectangles

Two rectangles are drawn, one with sharp edges, and the other with rounded edges.

The first rectangle is red with north west corner at 100, 100 and width and height of 100. The second rectangle, with round edges, is blue with north west corner at 200, 200 and width and height of 100.

---

package ex08;

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;

public class Ex08 extends Application {
    
    @Override
    public void start(Stage primaryStage) {
        
        Rectangle rect1 = new Rectangle(
                100, 100,   // NW corner x,y
                100, 100);   // width, height
        rect1.setFill(Color.RED);
        
        Rectangle rect2 = new Rectangle(
                200, 200,   // NW corner x,y
                100, 100);   // width, height
        rect2.setFill(Color.BLUE);
        rect2.setArcHeight(50);
        rect2.setArcWidth(50);
        
        Group root = new Group();
        root.getChildren().addAll(rect1,rect2);
        
        Scene scene = new Scene(root, 400, 400, Color.GHOSTWHITE);
        
        primaryStage.setTitle("Example 8. 2 Rectangles");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

---

This is the output:

---

7. QuadCurve

A QuadCurve is a polynomial in the power of 2. In contrast we have already seen a CubicCurve, a polynomial in the power of 3.

A QuadCurve needs a start point, end point, as well as a control point. Here both the start and endpoints are on the horizontal middle line at y = 200.

The control point is the in middle, that is x = 200, but since y = 0, it acts to pull up the curve.

---

package ex07;

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.QuadCurve;
import javafx.stage.Stage;

public class Ex07 extends Application {
    
    @Override
    public void start(Stage primaryStage) {
        
        QuadCurve quad = new QuadCurve(
                0, 200,   // start x,y
                200, 0,   // control x,y
                400,200);  // end x,y
        quad.setFill(Color.RED);
        Group root = new Group();
        root.getChildren().add(quad);
        
        Scene scene = new Scene(root, 400, 400, Color.GHOSTWHITE);
        
        primaryStage.setTitle("Example 7. QuadCurve");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

---

This is the output:

---

6. Ellipse

A red Ellipse with center of 200, 200 and radius of 100 in x and 150 in y is drawn.

Since the window is 400 by 400, it is centered inside the window.

---

package ex06;

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Ellipse;
import javafx.stage.Stage;

public class Ex06 extends Application {
    
    @Override
    public void start(Stage primaryStage) {
        
        Ellipse elli = new Ellipse(
                200, 200,   // center x,y
                100, 150);  // radius x,y
        elli.setFill(Color.RED);
        Group root = new Group();
        root.getChildren().add(elli);
        
        Scene scene = new Scene(root, 400, 400, Color.AQUA);
        
        primaryStage.setTitle("Example 6. Ellipse");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

---

This is the output:

---

5. Circle

A red circle with a radius of 100 and center 200,200 is drawn.

Since the scene is 400 by 400, it is centered on the window.

---

package ex05;

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;

public class Ex05 extends Application {
    
    @Override
    public void start(Stage primaryStage) {
        
        Circle circ = new Circle(
                200, 200,   // center x,y
                100,        // radius
                Color.RED); // fill

        Group root = new Group();
        root.getChildren().add(circ);
        
        Scene scene = new Scene(root, 400, 400, Color.AQUA);
        
        primaryStage.setTitle("Example 5. Circle");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

---

This is the output:

---

4. Arc

An arc shape is drawn on a 400 by 400 scene window.

The arc is centered at (200,200) so it at center of window. Its radius is 100 in both x and y direction.

It starts at 0 degrees and ends at 270 degrees, thus only 3/4 of the circle is filled.

---

package ex04;

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Arc;
import javafx.scene.shape.ArcType;
import javafx.stage.Stage;

public class Ex04 extends Application {
    
    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("Example 4. Arc");
        Group root = new Group();
        
        Arc arc = new Arc(
                200, 200, // center x,y
                100, 100, // radius x,y
                0, 270);  // start and length angle
        arc.setType(ArcType.ROUND);
        arc.setFill(Color.RED);
        
        root.getChildren().add(arc);
        
        Scene scene = new Scene(root, 400, 400, Color.AZURE);
        
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

---

This is the output:

---

3. Cubic Curve

A cubic curve is drawn. Besides a start and end point, it has 2 control points.

The first control point determines the initial slope of the curve coming from the start point. Here since the control point has only the y-point different, its slope will point downwards in the y-direction.

The second control point determines the final slope of the curve going to the end point. Here since the control point has only the y-point different, its slope will point upwards in the y direction.

---

package ex03;

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.CubicCurve;
import javafx.stage.Stage;

public class Ex03 extends Application {

    public static void main(String[] args) {
        Application.launch(args);
    }
    
    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("Example 3. Cubic Curve");
        Group root = new Group();
        Scene scene = new Scene(root, 320, 240, Color.WHITE);

        CubicCurve cubicCurve = new CubicCurve(
                20, 20,  // start x,y
                20, 220,  // control x1, y1 
                300, 220, // control x2, y2
                300, 20); // end x, y point
        cubicCurve.setStroke(Color.BLACK);
        cubicCurve.setStrokeWidth(3);
        cubicCurve.setFill(Color.WHITE);
                
        root.getChildren().add(cubicCurve);

        primaryStage.setScene(scene);
        primaryStage.show();
    }
}

---

This is the output:

---

2. Six Lines

A Group node is used to paint 6 lines on the screen.

There are 2 horizontal red lines, 2 vertical green lines, and 2 diagonal lines. Both diagonal lines are dashed, while the others are solid.

---

package ex02;

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Line;
import javafx.scene.shape.StrokeLineCap;
import javafx.stage.Stage;

public class Ex02 extends Application {
    
    @Override
    public void start(Stage primaryStage) {
        
        primaryStage.setTitle("Example 2. Six Lines");        

        Group root = new Group();
        
        Scene scene = new Scene(root, 640, 480, Color.CYAN);
        
        // Red line - top and bottom
        Line redTop = new Line(10, 10, 630, 10);
        redTop.setStroke(Color.RED);
        redTop.setStrokeWidth(10);
        Line redBot = new Line(10, 470, 630, 470);
        redBot.setStroke(Color.RED);
        redBot.setStrokeWidth(10);
        root.getChildren().addAll(redTop,redBot);
        
        // Green Line -left and right
        Line greenLeft = new Line(10, 30, 10, 450);
        greenLeft.setStroke(Color.GREEN);
        greenLeft.setStrokeWidth(10);
        greenLeft.setStrokeLineCap(StrokeLineCap.ROUND);
        Line greenRight = new Line(630, 30, 630, 450);
        greenRight.setStroke(Color.GREEN);
        greenRight.setStrokeWidth(10);
        greenRight.setStrokeLineCap(StrokeLineCap.ROUND);
        root.getChildren().addAll(greenLeft,greenRight);
        
        // Yellow lines - diagonal lines
        Line yellow1 = new Line(30, 30, 610, 450);
        yellow1.setStroke(Color.YELLOW);
        yellow1.setStrokeWidth(10);
        yellow1.getStrokeDashArray().addAll(20d, 10d, 20d);
        Line yellow2 = new Line(30, 450, 610, 30);
        yellow2.setStroke(Color.YELLOW);
        yellow2.setStrokeWidth(10);
        yellow2.getStrokeDashArray().addAll(20d, 10d, 20d);
        root.getChildren().addAll(yellow1,yellow2);
        
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

---

This is the output:

---

1. Four Buttons in a Grid

A GridPane layout is used to organize 4 buttons in a 2 by 2 grid structure.

All four buttons route to select(int) function but pass in a different int, which is the output of the console.

---

package ex01;

import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;

public class Ex01 extends Application {
    
    Stage window;

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

    @Override
    public void start(Stage primaryStage) throws Exception {
        window = primaryStage;
        window.setTitle("Example 1. Four Buttons in a Grid");
                
        GridPane grid = new GridPane();
        grid.setVgap(100);
        grid.setHgap(100);
        grid.setAlignment(Pos.CENTER);
        
        Button button1 = new Button("Button 1");
        GridPane.setConstraints(button1, 0, 0);
        button1.setOnAction(e -> select(1));
        
        Button button2 = new Button("Button 2");
        GridPane.setConstraints(button2, 1, 0);
        button2.setOnAction(e -> select(2));
        
        Button button3 = new Button("Button 3");
        GridPane.setConstraints(button3, 0, 1);
        button3.setOnAction(e -> select(3));
        
        Button button4 = new Button("Button 4");
        GridPane.setConstraints(button4, 1, 1);
        button4.setOnAction(e -> select(4));
        
        grid.getChildren().addAll(button1, button2, button3, button4);

        Scene scene = new Scene(grid, 640, 480);
        window.setScene(scene);
        window.show();
    }

    private void select(int i) {
        System.out.println("The button selected is " + i);
    }
}

---

This is the output:

---