JavaFX: Path and PathElement : Draw arbitrary shapes

 

Path and PathElement are used to draw arbitrary shapes. A Path represents and arbitrary shape that can be constructed using number of PathElements.

 

Why Path?

If you want customized shapes, then you can construct them using Path element.

 

PathElement

PathElement is an abstract element of the Path object. It can represent  any geometric objects like straight lines, arcs, quadratic curves, cubic curves, etc.

 

Following Concrete classes extend PathElement class.

a.   Arcto

b.   ClosePath

c.    CubicCurveTo

d.   HLineTo

e.   LineTo

f.     MoveTo

g.   QuadCurveTo

h.   VLineTo

 

MoveTo
Move to the specified coordinates. It must be the first path element.

 

ArcTo

A path element that forms an arc from the previous coordinates to the specified x and y coordinates using the specified radius.

 

ClosePath

A path element which closes the current path.

 

CubicCurveTo

Creates a curved path element, defined by three new points, by drawing a Cubic Bézier curve that intersects both the current coordinates and the specified coordinates (x, y) using the specified points (controlX1,controlY1) and (controlX2,controlY2) as B'zier control points.

 

HLineTo

Creates a horizontal line path element from the current point to x.

 

LineTo

Creates a line path element by drawing a straight line from the current coordinate to the new coordinates.

 

QuadCurveTo

Creates a curved path element, defined by two new points, by drawing a Quadratic Bézier curve that intersects both the current coordinates and the specified coordinates (x, y), using the specified point (controlX, controlY) as a B'zier control point.

 

VLineTo

Creates a vertical line path element from the current point to y.

 

Example

MoveTo moveTo = new MoveTo(50, 100);

HLineTo hlineTo = new HLineTo(70);

QuadCurveTo quadCurveTo = new QuadCurveTo(120, 360, 100, 0);

LineTo lineTo = new LineTo(175, 55);

ArcTo arcTo = new ArcTo();

arcTo.setX(50);

arcTo.setY(50);

arcTo.setRadiusX(50);

arcTo.setRadiusY(50);

 

ClosePath closePath = new ClosePath();

 

Path path = new Path(moveTo, hlineTo, quadCurveTo, lineTo, arcTo, closePath);

 

Find the below working application.

 

PathWidgetDemo.java

package com.sample.app;

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.ClosePath;
import javafx.scene.shape.HLineTo;
import javafx.scene.shape.LineTo;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;
import javafx.scene.shape.QuadCurveTo;
import javafx.stage.Stage;

public class PathWidgetDemo  extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {

        primaryStage.setTitle("Hello World");

        Group group = new Group();

        MoveTo moveTo = new MoveTo(50, 100);
        HLineTo hlineTo = new HLineTo(70);
        QuadCurveTo quadCurveTo = new QuadCurveTo(120, 360, 100, 0);
        LineTo lineTo = new LineTo(175, 55);
        ArcTo arcTo = new ArcTo();
        arcTo.setX(50);
        arcTo.setY(50);
        arcTo.setRadiusX(50);
        arcTo.setRadiusY(50);

        ClosePath closePath = new ClosePath();

        Path path = new Path(moveTo, hlineTo, quadCurveTo, lineTo, arcTo, closePath);

        group.getChildren().add(path);

        Scene scene = new Scene(group, 500, 500, Color.AZURE);

        primaryStage.setScene(scene);

        primaryStage.show();

    }

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

}

Output

 

 

Let’s write the similar application using fxml.

 

pathDemo.fxml

<?import javafx.scene.*?>
<?import javafx.scene.shape.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>

<Group xmlns:fx="http://javafx.com/fxml" fx:controller="com.sample.app.controller.PathController">

    <Path fx:id="path1" fill="lightsalmon" stroke="black" strokeWidth="5">
    
        <elements>
            <MoveTo x="50" y="100"/>
            <HLineTo x="70.0"/>
            
            <QuadCurveTo x="120.0" y="360" controlX="100.0" controlY="0.0" />
            
            <LineTo x="175" y="55" />
            <ArcTo x="50" y="50" radiusX="50" radiusY="50" />
            <ClosePath />
        </elements>
    
    </Path>

        
</Group>

 

PathController.java

package com.sample.app.controller;

import java.net.URL;
import java.util.ResourceBundle;

import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.shape.Path;

public class PathController implements Initializable {

    @FXML
    private Path path1;
    

    @Override
    public void initialize(URL location, ResourceBundle resources) {
    }

}

 

PathDemo.java

package com.sample.app;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class PathDemo extends Application {

    private static final String FXML_FILE = "/pathDemo.fxml";
    private static final String STAGE_TITLE = "Path Demo";

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

    }

    @Override
    public void start(Stage primaryStage) throws Exception {

        Parent root = (Parent) FXMLLoader.load(this.getClass().getResource(FXML_FILE));

        Scene scene = new Scene(root, 200, 450, Color.AZURE);

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

}

 

 

 

 

Previous                                                    Next                                                    Home