I'm making an application with javaFX. The application consists of creating a kind of "graph" from the user.
The user through a button creates a node (is created by a circle with JAVAFX figure) and associates it to a variable, repeating the process, creating another node, and so on. Now I need to figure out how to define the node position inside a specially reserved space. Obviously, after creating nodes, through another button, the user creates the arcs (is created by a line connecting two nodes) associated with the nodes, thus defining a graph.
My problem is that I do not understand how to indicate the position of lines that will act as arcs in my graph.
Please help me.I'm not very experienced and I'm trying to tackle this problem.
First of all you need to tell us what is your "reserved space"? If it's a Canvas then you can draw shapes with Canva's GraphicsContext.
Canvas canvas = new Canvas(300, 250);
GraphicsContext gc = canvas.getGraphicsContext2D();
gc.fillOval(10, 60, 30, 30);
gc.fillArc(10, 110, 30, 30, 45, 240, ArcType.OPEN);
Otherwise if you are working inside a pane with layout you need to know if the components are managed or not. For example inside a Pane or AnchorPane the node's automatic layout is disabled, thus you need to specify their layoutX and layoutY by yourself (+ node dimensions) like :
node.setLayoutX(12);
node.setLayoutY(222);
node.setPrefWidth(500);
node.setPrefHeight(500);
If you are using a pane like VBox which manage the layout of it's nodes you need to set the nodes inside the pane to be unmanaged in order for you to apply specific transformations. You can do that just by setting :
node.setManaged(false)
I will not recommend you to use Canvas cause handling the shapes will be very hard, for example if you need to remove something you probably have to clear everything and redraw only the visible shapes.
Well I had some time so here is a small example ( It might not be the optimal solution, but you can take is as a reference)
GraphTest
import java.util.ArrayList;
import javafx.application.Application;
import javafx.event.EventHandler;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.input.MouseEvent;
import javafx.scene.paint.Color;
import javafx.scene.shape.Line;
import javafx.stage.Stage;
public class GraphTest extends Application {
private double orgSceneX, orgSceneY;
private double orgTranslateX, orgTranslateY;
private Group root = new Group();
#Override
public void start(Stage primaryStage) throws Exception {
GraphNode node1 = createNode("A", 100, 100, Color.RED);
GraphNode node2 = createNode("B", 300, 200, Color.GREEN);
GraphNode node3 = createNode("C", 80, 300, Color.PURPLE);
connectNodes(node1, node2, "C1");
connectNodes(node3, node1, "C2");
connectNodes(node3, node2, "C3");
root.getChildren().addAll(node1, node2, node3);
primaryStage.setScene(new Scene(root, 400, 400));
primaryStage.show();
}
private void connectNodes(GraphNode node1, GraphNode node2, String edgeText) {
Line edgeLine = new Line(node1.getCenterX(), node1.getCenterY(), node2.getCenterX(), node2.getCenterY());
Label edgeLabel = new Label(edgeText);
node1.addNeighbor(node2);
node2.addNeighbor(node1);
node1.addEdge(edgeLine, edgeLabel);
node2.addEdge(edgeLine, edgeLabel);
root.getChildren().addAll(edgeLine, edgeLabel);
}
private GraphNode createNode(String nodeName, double xPos, double yPos, Color color) {
GraphNode node = new GraphNode(nodeName, xPos, yPos, color);
node.setOnMousePressed(circleOnMousePressedEventHandler);
node.setOnMouseDragged(circleOnMouseDraggedEventHandler);
return node;
}
EventHandler<MouseEvent> circleOnMousePressedEventHandler = new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent t) {
orgSceneX = t.getSceneX();
orgSceneY = t.getSceneY();
GraphNode node = (GraphNode) t.getSource();
orgTranslateX = node.getTranslateX();
orgTranslateY = node.getTranslateY();
}
};
EventHandler<MouseEvent> circleOnMouseDraggedEventHandler = new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent t) {
double offsetX = t.getSceneX() - orgSceneX;
double offsetY = t.getSceneY() - orgSceneY;
double newTranslateX = orgTranslateX + offsetX;
double newTranslateY = orgTranslateY + offsetY;
GraphNode node = (GraphNode) t.getSource();
node.setTranslateX(newTranslateX);
node.setTranslateY(newTranslateY);
updateLocations(node);
}
};
private void updateLocations(GraphNode node) {
ArrayList<GraphNode> connectedNodes = node.getConnectedNodes();
ArrayList<Line> edgesList = node.getEdges();
for (int i = 0; i < connectedNodes.size(); i++) {
GraphNode neighbor = connectedNodes.get(i);
Line l = edgesList.get(i);
l.setStartX(node.getCenterX());
l.setStartY(node.getCenterY());
l.setEndX(neighbor.getCenterX());
l.setEndY(neighbor.getCenterY());
}
}
public static void main(String[] args) {
launch(args);
}
}
GraphNode
import java.util.ArrayList;
import javafx.beans.binding.DoubleBinding;
import javafx.scene.control.Label;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Line;
public class GraphNode extends StackPane {
private Circle circle;
private Label text;
private ArrayList<GraphNode> connectedNodesList = new ArrayList<>();
private ArrayList<Line> edgesList = new ArrayList<>();
private ArrayList<Label> edgesLabelList = new ArrayList<>();
private double radius = 50.0;
public GraphNode(String name, double xPos, double yPos, Color color) {
circle = new Circle(radius, color);
text = new Label(name);
text.setTextFill(Color.WHITE);
setLayoutX(xPos);
setLayoutY(yPos);
getChildren().addAll(circle, text);
layout();
}
public void addNeighbor(GraphNode node) {
connectedNodesList.add(node);
}
public void addEdge(Line edgeLine, Label edgeLabel) {
edgesList.add(edgeLine);
edgesLabelList.add(edgeLabel);
// If user move the node we should translate the edge labels as well
// one way of doing that is by make a custom binding to the layoutXProperty as well
// as to layoutYProperty. We will listen for changes to the currentNode translate properties
// and for changes of our neighbor.
edgeLabel.layoutXProperty().bind(new DoubleBinding() {
{
bind(translateXProperty());
bind(connectedNodesList.get(connectedNodesList.size() - 1).translateXProperty());
}
#Override
protected double computeValue() {
// We find the center of the line to translate the text
double width = edgeLine.getEndX() - edgeLine.getStartX();
return edgeLine.getStartX() + width / 2.0;
}
});
edgeLabel.layoutYProperty().bind(new DoubleBinding() {
{
bind(translateYProperty());
bind(connectedNodesList.get(connectedNodesList.size() - 1).translateYProperty());
}
#Override
protected double computeValue() {
double width = edgeLine.getEndY() - edgeLine.getStartY();
return edgeLine.getStartY() + width / 2.0;
}
});
}
public ArrayList<GraphNode> getConnectedNodes() {
return connectedNodesList;
}
public ArrayList<Line> getEdges() {
return edgesList;
}
public double getX() {
return getLayoutX() + getTranslateX();
}
public double getY() {
return getLayoutY() + getTranslateY();
}
public double getCenterX() {
return getX() + radius;
}
public double getCenterY() {
return getY() + radius;
}
}
And the Output would look like that :
You can move the nodes with your mouse and you will see all the labels will follow the shapes locations ( Cicle , Lines )
Related
I want to create a hexagon of hexagons as buttons in JavaFX, I use an image and try to position some buttons to the position of each hexagon but I cannot change the position of them in a grid pane. Here is my code:
package sample;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.control.Button;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.GridPane;
public class GameBoard extends GridPane {
public GameBoard(){
this.setAlignment(Pos.CENTER);
ImageView image = new ImageView();
Image hexagonImg = new Image("hexagon.jpg");
image.setFitWidth(500);
image.setFitHeight(500);
image.setImage(hexagonImg);
this.add(image,0,0);
GridPane button1Pane = new GridPane();
this.add(button1Pane,0,0);
Button button1 = new Button();
button1Pane.add(button1,1,0);
}
}
polygon hexagons
Since you need to use as buttons ; I added mouse click event wich changes stage's tittle . If you want to place hexagons side to side you may need to concider radius for x axis and apothem for y axis .
this is afunctional single class javafx app you can try
App.java
public class App extends Application {
#Override
public void start(Stage stage) {
double HexagonRadius = 100;
Hexagon hexagon1 = new Hexagon(HexagonRadius, Color.CADETBLUE);
Hexagon hexagon2 = new Hexagon(HexagonRadius, Color.MEDIUMPURPLE);
hexagon2.setTranslateY(hexagon1.getOffsetY() * 2);
Hexagon hexagon3 = new Hexagon(HexagonRadius, Color.MEDIUMSEAGREEN);
hexagon3.setTranslateY(-hexagon1.getOffsetY() * 2);
Hexagon hexagon4 = new Hexagon(HexagonRadius, Color.CORNFLOWERBLUE);
hexagon4.setTranslateY(-hexagon1.getOffsetY());
hexagon4.setTranslateX(hexagon1.getOffsetX());
Hexagon hexagon5 = new Hexagon(HexagonRadius, Color.YELLOW);
hexagon5.setTranslateY(-hexagon1.getOffsetY());
hexagon5.setTranslateX(-hexagon1.getOffsetX());
Hexagon hexagon6 = new Hexagon(HexagonRadius, Color.ORANGE);
hexagon6.setTranslateY(hexagon1.getOffsetY());
hexagon6.setTranslateX(-hexagon1.getOffsetX());
Hexagon hexagon7 = new Hexagon(HexagonRadius, Color.SKYBLUE);
hexagon7.setTranslateY(hexagon1.getOffsetY());
hexagon7.setTranslateX(hexagon1.getOffsetX());
Group hexagonsGroup = new Group(hexagon1, hexagon2, hexagon3, hexagon4, hexagon5, hexagon6, hexagon7);
StackPane stackPane = new StackPane(hexagonsGroup);
var scene = new Scene(stackPane, 640, 480);
scene.setFill(Color.ANTIQUEWHITE);
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch();
}
public class Hexagon extends Group {
private Polygon polygon;
private double radius;
private double radianStep = (2 * Math.PI) / 6;
private double offsetY;
private double offsetX;
public Hexagon(double radius, Paint color) {
this.radius = radius;
makeHexagon(radius, color);
offsetY = calculateApothem();
offsetX = radius * 1.5;
changeTittle();
}
private void makeHexagon(double radius, Paint color) {
polygon = new Polygon();
this.getChildren().add(polygon);
polygon.setFill(color);
polygon.setStroke(Color.WHITESMOKE);
polygon.setEffect(new DropShadow(10, Color.BLACK));
polygon.setStrokeWidth(10);
polygon.setStrokeType(StrokeType.INSIDE);
for (int i = 0; i < 6; i++) {
double angle = radianStep * i;
polygon.getPoints().add(Math.cos(angle) * radius / 1.1);
polygon.getPoints().add(Math.sin(angle) * radius / 1.1);
}
}
public void changeTittle() {
polygon.setOnMouseClicked(e -> {
Stage stage = (Stage) this.getScene().getWindow();
stage.setTitle(polygon.getFill().toString());
});
}
public double getOffsetY() {
return offsetY;
}
public double getOffsetX() {
return offsetX;
}
private double calculateApothem() {
return (Math.tan(radianStep) * radius) / 2;
}
}
}
I would just create a Path for each Hexagon and put them in Group which you can then place in the middle of some Pane. Dealing with images and a GridPane only complicates things. Just doing some graphics directly is much easier.
I have a set of Nodes, Circles, on the stage.
I want to be able to click on one of them and 'select it' (just get a reference to it so I can move it around, change color etc.)
Pane root = new Pane();
root.getChildren().addAll( /* an array of Circle objects */ );
Scene scene = new Scene(root, 500, 500, BACKGROUND_COLOR);
scene.setOnMouseClicked(new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent mouseEvent) {
// how do I get which Circle I clicked on?
}
});
stage.setTitle(TITLE);
stage.setScene(scene);
stage.show();
I would simply register a listener with each circle itself. Then you already have the reference to the circle with which the listener was registered.
This example pushes the limit a little as to usability, because it has 10,000 circles shown all at once, but it demonstrates the technique:
import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.beans.property.ObjectProperty;
import javafx.beans.property.SimpleObjectProperty;
import javafx.css.PseudoClass;
import javafx.geometry.Point2D;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.ScrollPane;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.Pane;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Line;
import javafx.stage.Stage;
public class GridOfCircles extends Application {
private static final PseudoClass SELECTED_P_C = PseudoClass.getPseudoClass("selected");
private final int numColumns = 100 ;
private final int numRows = 100 ;
private final double radius = 4 ;
private final double spacing = 2 ;
private final ObjectProperty<Circle> selectedCircle = new SimpleObjectProperty<>();
private final ObjectProperty<Point2D> selectedLocation = new SimpleObjectProperty<>();
#Override
public void start(Stage primaryStage) {
selectedCircle.addListener((obs, oldSelection, newSelection) -> {
if (oldSelection != null) {
oldSelection.pseudoClassStateChanged(SELECTED_P_C, false);
}
if (newSelection != null) {
newSelection.pseudoClassStateChanged(SELECTED_P_C, true);
}
});
Pane grid = new Pane();
for (int x = 0 ; x < numColumns; x++) {
double gridX = x*(spacing + radius + radius) + spacing ;
grid.getChildren().add(new Line(gridX, 0, gridX, numRows*(spacing + radius + radius)));
}
for (int y = 0; y < numRows ; y++) {
double gridY = y*(spacing + radius + radius) + spacing ;
grid.getChildren().add(new Line(0, gridY, numColumns*(spacing + radius + radius), gridY));
}
for (int x = 0 ; x < numColumns; x++) {
for (int y = 0 ;y < numRows ; y++) {
grid.getChildren().add(createCircle(x, y));
}
}
Label label = new Label();
label.textProperty().bind(Bindings.createStringBinding(() -> {
Point2D loc = selectedLocation.get();
if (loc == null) {
return "" ;
}
return String.format("Location: [%.0f, %.0f]", loc.getX(), loc.getY());
}, selectedLocation));
BorderPane root = new BorderPane(new ScrollPane(grid));
root.setTop(label);
Scene scene = new Scene(root);
scene.getStylesheets().add("grid.css");
primaryStage.setScene(scene);
primaryStage.show();
}
private Circle createCircle(int x, int y) {
Circle circle = new Circle();
circle.getStyleClass().add("intersection");
circle.setCenterX(x * (spacing + radius + radius) + spacing);
circle.setCenterY(y * (spacing + radius + radius) + spacing);
circle.setRadius(radius);
circle.addEventHandler(MouseEvent.MOUSE_CLICKED, e -> {
selectedCircle.set(circle);
selectedLocation.set(new Point2D(x, y));
});
return circle ;
}
public static void main(String[] args) {
launch(args);
}
}
with the file grid.css:
.intersection {
-fx-fill: blue ;
}
.intersection:selected {
-fx-fill: gold ;
}
You can get the reference by using getSource of the MouseEvent.
Example in which you can drag a Circle and any other Node:
import javafx.application.Application;
import javafx.event.EventHandler;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Rectangle;
import javafx.scene.text.Text;
import javafx.stage.Stage;
public class Main extends Application {
#Override
public void start(Stage primaryStage) throws Exception {
Circle circle = new Circle( 100,100,50);
circle.setStroke(Color.BLUE);
circle.setFill(Color.BLUE.deriveColor(1, 1, 1, 0.3));
Rectangle rectangle = new Rectangle( 0,0,100,100);
rectangle.relocate(200, 200);
rectangle.setStroke(Color.GREEN);
rectangle.setFill(Color.GREEN.deriveColor(1, 1, 1, 0.3));
Text text = new Text( "Example Text");
text.relocate(300, 300);
Pane root = new Pane();
root.getChildren().addAll(circle, rectangle, text);
MouseGestures mouseGestures = new MouseGestures();
mouseGestures.makeDraggable(circle);
mouseGestures.makeDraggable(rectangle);
mouseGestures.makeDraggable(text);
Scene scene = new Scene(root, 1024, 768);
primaryStage.setScene(scene);
primaryStage.show();
}
public static class MouseGestures {
class DragContext {
double x;
double y;
}
DragContext dragContext = new DragContext();
public void makeDraggable( Node node) {
node.setOnMousePressed( onMousePressedEventHandler);
node.setOnMouseDragged( onMouseDraggedEventHandler);
node.setOnMouseReleased(onMouseReleasedEventHandler);
}
EventHandler<MouseEvent> onMousePressedEventHandler = event -> {
if( event.getSource() instanceof Circle) {
Circle circle = (Circle) (event.getSource());
dragContext.x = circle.getCenterX() - event.getSceneX();
dragContext.y = circle.getCenterY() - event.getSceneY();
} else {
Node node = (Node) (event.getSource());
dragContext.x = node.getTranslateX() - event.getSceneX();
dragContext.y = node.getTranslateY() - event.getSceneY();
}
};
EventHandler<MouseEvent> onMouseDraggedEventHandler = event -> {
if( event.getSource() instanceof Circle) {
Circle circle = (Circle) (event.getSource());
circle.setCenterX( dragContext.x + event.getSceneX());
circle.setCenterY( dragContext.y + event.getSceneY());
} else {
Node node = (Node) (event.getSource());
node.setTranslateX( dragContext.x + event.getSceneX());
node.setTranslateY( dragContext.y + event.getSceneY());
}
};
EventHandler<MouseEvent> onMouseReleasedEventHandler = event -> {
};
}
public static void main(String[] args) {
launch(args);
}
}
I'm working on a project where i need
to make circles and relate between them with cubicCurve
as shown in this image:
And i need to pass mouseclick events through the part of the cubicCurve colored with "ALICEBLUE", but still being able to pass mouseclick events to the Line colored with "BLACK".
cubicCurve Code:
public class transLine extends CubicCurve {
private Polygon polygon;
private Circle to;
private Circle from;
private double arrowHeadTransLength;
public Circle getTo() {
return to;
}
public void setTo(Circle to) {
this.to = to;
}
public Circle getFrom() {
return from;
}
public void setFrom(Circle from) {
this.from = from;
}
public transLine() {
setStroke(Color.BLACK);
setFill(Color.ALICEBLUE);
// doesn't work because i can't pass click event to the black line
setMouseTransparent(true);
// just arrow head part
polygon = new Polygon();
fixPolygon();
}
public void fixPolygon(){
Point2D A = new Point2D(getEndX(),getEndY());
Point2D Ap = new Point2D(getControlX2(),getControlY2());
Point2D Ms = getMSecond(A,Ap,arrowHeadTransLength);
Point2D P1 = getRotatePoint(Ms, A, Math.PI/7);
Point2D P2 = getRotatePoint(Ms, A, -Math.PI/7);
getPolygon().getPoints().setAll(new Double[]
{A.getX(),A.getY(),P1.getX(),P1.getY(),P2.getX(),P2.getY()});
}
public Point2D getMSecond(Point2D A, Point2D B, double r){
if( A.getX()==B.getX() && A.getY()==B.getY() ){
return B;
}
double a = (A.getY()-B.getY())/(A.getX()-B.getX());
double b = A.getY()-a*A.getX();
double xs = -r*(A.getX()-B.getX())/A.distance(B)+A.getX();
double ys = a*xs+b;
return new Point2D(xs,ys);
}
public Point2D getRotatePoint(Point2D P, Point2D O, double theta){
double rx = Math.cos(theta)*(P.getX()-O.getX()) - Math.sin(theta)*
(P.getY()-O.getY()) + O.getX();
double ry = Math.sin(theta)*(P.getX()-O.getX()) + Math.cos(theta)*
(P.getY()-O.getY()) + O.getY();
return new Point2D(rx,ry);
}
}
I can't see a particularly easy way to do this. I think that in order to have different mouse behaviors for the fill and the curve, you need those to be different nodes. So the idea is to create the curve and the fill as separate pieces, place them in a Group, and then use the Group in the display. Then make the piece representing the fill mouse-transparent.
Actually implementing that is a bit tricky; particularly getting a cubic curve that doesn't respond to mouse clicks in its "interior". The only way I could find to do this was to use a Path comprising of a MoveTo, a CubicCurveTo, and then another CubicCurveTo that retraced the reverse path (this ensures the interior is essentially empty). Then, as suggested, place that in a group along with a regular CubicCurve representing the filled portion.
SSCCE:
import javafx.application.Application;
import javafx.beans.property.ObjectProperty;
import javafx.beans.property.SimpleObjectProperty;
import javafx.beans.value.ChangeListener;
import javafx.event.Event;
import javafx.event.EventHandler;
import javafx.event.EventType;
import javafx.geometry.Point2D;
import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.paint.Paint;
import javafx.scene.shape.Circle;
import javafx.scene.shape.CubicCurve;
import javafx.scene.shape.CubicCurveTo;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;
import javafx.stage.Stage;
public class ConnectingCubicCurve extends Application {
#Override
public void start(Stage primaryStage) {
Circle start = createDraggingCircle(100, 100, 10, Color.CORAL);
Circle end = createDraggingCircle(300, 300, 10, Color.CORAL);
Connection connection = new Connection();
connection.setFromCircle(start);
connection.setToCircle(end);
Pane pane = new Pane(connection.asNode(), start, end);
pane.setOnMouseClicked(e -> System.out.println("Click on pane"));
connection.addEventHandler(MouseEvent.MOUSE_CLICKED, e -> System.out.println("Click on connection"));
start.setOnMouseClicked(e -> System.out.println("Click on start"));
end.setOnMouseClicked(e -> System.out.println("Click on end"));
Scene scene = new Scene(pane, 600, 600);
primaryStage.setScene(scene);
primaryStage.show();
}
private Circle createDraggingCircle(double centerX, double centerY, double radius, Paint fill) {
Circle circle = new Circle(centerX, centerY, radius, fill);
ObjectProperty<Point2D> mouseLoc = new SimpleObjectProperty<>();
circle.setOnDragDetected(e ->
mouseLoc.set(new Point2D(e.getSceneX(), e.getSceneY())));
circle.setOnMouseReleased(e -> mouseLoc.set(null));
circle.setOnMouseDragged(e -> {
if (mouseLoc.get() == null) return ;
double x = e.getSceneX() ;
double y = e.getSceneY() ;
double deltaX = x - mouseLoc.get().getX() ;
double deltaY = y - mouseLoc.get().getY() ;
circle.setCenterX(circle.getCenterX() + deltaX);
circle.setCenterY(circle.getCenterY() + deltaY);
mouseLoc.set(new Point2D(x, y));
});
return circle ;
}
public static class Connection {
private Path connectingLine ;
private CubicCurve fill ;
private Group group ;
private ObjectProperty<Circle> fromCircle = new SimpleObjectProperty<>();
private ObjectProperty<Circle> toCircle = new SimpleObjectProperty<>();
public Connection() {
connectingLine = new Path();
MoveTo start = new MoveTo();
CubicCurveTo curve = new CubicCurveTo();
CubicCurveTo reverseCurve = new CubicCurveTo();
reverseCurve.xProperty().bind(start.xProperty());
reverseCurve.yProperty().bind(start.yProperty());
reverseCurve.controlX1Property().bind(curve.controlX2Property());
reverseCurve.controlX2Property().bind(curve.controlX1Property());
reverseCurve.controlY1Property().bind(curve.controlY2Property());
reverseCurve.controlY2Property().bind(curve.controlY1Property());
connectingLine.getElements().addAll(start, curve, reverseCurve);
fill = new CubicCurve();
fill.setMouseTransparent(true);
group = new Group();
group.getChildren().addAll(fill, connectingLine);
connectingLine.setStroke(Color.BLACK);
connectingLine.setStrokeWidth(3);
fill.setStrokeWidth(0);
fill.setStroke(Color.TRANSPARENT);
fill.setFill(Color.ALICEBLUE);
fill.startXProperty().bind(start.xProperty());
fill.startYProperty().bind(start.yProperty());
fill.controlX1Property().bind(curve.controlX1Property());
fill.controlX2Property().bind(curve.controlX2Property());
fill.controlY1Property().bind(curve.controlY1Property());
fill.controlY2Property().bind(curve.controlY2Property());
fill.endXProperty().bind(curve.xProperty());
fill.endYProperty().bind(curve.yProperty());
fromCircle.addListener((obs, oldCircle, newCircle) -> {
if (oldCircle != null) {
start.xProperty().unbind();
start.yProperty().unbind();
}
if (newCircle != null) {
start.xProperty().bind(newCircle.centerXProperty());
start.yProperty().bind(newCircle.centerYProperty());
}
});
toCircle.addListener((obs, oldCircle, newCircle) -> {
if (oldCircle != null) {
curve.xProperty().unbind();
curve.yProperty().unbind();
}
if (newCircle != null) {
curve.xProperty().bind(newCircle.centerXProperty());
curve.yProperty().bind(newCircle.centerYProperty());
}
});
ChangeListener<Number> endpointListener = (obs, oldValue, newValue) -> {
Point2D startPoint = new Point2D(start.getX(), start.getY());
Point2D end = new Point2D(curve.getX(), curve.getY());
Point2D vector = end.subtract(startPoint);
Point2D perpVector = new Point2D(-vector.getY(), vector.getX());
Point2D control1 = startPoint.add(perpVector);
Point2D control2 = end.add(perpVector);
curve.setControlX1(control1.getX());
curve.setControlX2(control2.getX());
curve.setControlY1(control1.getY());
curve.setControlY2(control2.getY());
};
start.xProperty().addListener(endpointListener);
start.yProperty().addListener(endpointListener);
curve.xProperty().addListener(endpointListener);
curve.yProperty().addListener(endpointListener);
}
public <E extends Event> void addEventHandler(EventType<E> eventType, EventHandler<E> eventHandler) {
connectingLine.addEventHandler(eventType, eventHandler);
}
public <E extends Event> void removeEventHandler(EventType<E> eventType, EventHandler<E> eventHandler) {
connectingLine.removeEventHandler(eventType, eventHandler);
}
public Node asNode() {
return group ;
}
public final ObjectProperty<Circle> fromCircleProperty() {
return this.fromCircle;
}
public final javafx.scene.shape.Circle getFromCircle() {
return this.fromCircleProperty().get();
}
public final void setFromCircle(final javafx.scene.shape.Circle fromCircle) {
this.fromCircleProperty().set(fromCircle);
}
public final ObjectProperty<Circle> toCircleProperty() {
return this.toCircle;
}
public final javafx.scene.shape.Circle getToCircle() {
return this.toCircleProperty().get();
}
public final void setToCircle(final javafx.scene.shape.Circle toCircle) {
this.toCircleProperty().set(toCircle);
}
}
public static void main(String[] args) {
launch(args);
}
}
I am trying to learn javafx. I did most of the code but I am having trouble with the start method.
What I wanted to do was add spots to the screen by clicking on it. And if I press either 1 or 0 future spots that will be added will change to some different color. Therefore, I know that I must use setOnMouseClicked
and setOnKeyPressed methods but there isn't much on the internet on it.
import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
public class Spots extends Application {
public static final int SIZE = 500;
public static final int SPOT_RADIUS = 20;
private LinkedList<Spot> spotList;
private Color color;
public static void main(String...args) {
launch(args);
}
public void start(Stage stage) {
stage.setTitle("Spots");
dotList = new SinglyLinkedList<>();
Group root = new Group();
Scene scene = new Scene(root, 500, 500, Color.BLACK);
Spot r;
// ...
stage.show();
}
private class Spot extends Circle {
public Spot(double xPos, double yPos) {
super(xPos, yPos, SPOT_RADIUS);
setFill(color);
}
public boolean contains(double xPos, double yPos) {
double dx = xPos - getCenterX();
double dy = yPos - getCenterY();
double distance = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
return distance <= SPOT_RADIUS;
}
}
}
The reason the circle is not accepting is that it is not focused. For nodes to respond to key events they should be focusTraversable. You can do that by
calling setFocusTraversable(true) on the node. I edited your start() method and here is the code I ended up with.
public void start(Stage primaryStage) throws Exception {
Pane pane = new Pane();
final Scene scene = new Scene(pane, 500, 500);
final Circle circle = new Circle(250, 250, 20);
circle.setFill(Color.WHITE);
circle.setStroke(Color.BLACK);
pane.getChildren().add(circle);
circle.setFocusTraversable(true);
circle.setOnKeyPressed(new EventHandler<KeyEvent>() {
#Override
public void handle(KeyEvent e) {
if ((e.getCode() == KeyCode.UP) && (circle.getCenterY() >= 5)) {
circle.setCenterY(circle.getCenterY() - 5);
}
else if ((e.getCode() == KeyCode.DOWN && (circle.getCenterY() <= scene.getHeight() - 5))) {
circle.setCenterY(circle.getCenterY() + 5);
}
else if ((e.getCode() == KeyCode.RIGHT) && (circle.getCenterX() <= scene.getWidth() - 5)) {
circle.setCenterX(circle.getCenterX() + 5);
}
else if ((e.getCode() == KeyCode.LEFT && (circle.getCenterX() >= 5))) {
circle.setCenterX(circle.getCenterX()-5);
}
}
});
//creates new spots by clicking anywhere on the pane
pane.setOnMouseClicked(new EventHandler<MouseEvent>() {
public void handle(MouseEvent event) {
double newX = event.getX(); //getting the x-coordinate of the clicked area
double newY = event.getY(); //getting the y-coordinate of the clicked area
Circle newSpot = new Circle(newX, newY,20);
newSpot.setFill(Color.WHITE);
newSpot.setStroke(Color.BLACK);
pane.getChildren().add(newSpot);
}
});
primaryStage.setTitle("Move the circle");
primaryStage.setScene(scene);
primaryStage.show();
}
Also take look at the answers for the following links:
Handling keyboard events
Cannot listen to KeyEvent in
JavaFX
Solution Approach
You can monitor the scene for key typed events and switch the color mode based on that. You can place an mouse event handler on your scene root pane and add a circle (of the appropriate color for the prevailing color mode) to the scene when the user clicks anywhere in the pane.
Sample Code
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;
// Java 8+ code.
public class Spots extends Application {
private static final int SIZE = 500;
private static final int SPOT_RADIUS = 20;
private Color color = Color.BLUE;
public void start(Stage stage) {
Pane root = new Pane();
root.setOnMouseClicked(event ->
root.getChildren().add(
new Spot(
event.getX(),
event.getY(),
color
)
)
);
Scene scene = new Scene(root, SIZE, SIZE, Color.BLACK);
scene.setOnKeyTyped(event -> {
switch (event.getCharacter()) {
case "0":
color = Color.BLUE;
break;
case "1":
color = Color.RED;
break;
}
});
stage.setScene(scene);
stage.show();
}
private class Spot extends Circle {
public Spot(double xPos, double yPos, Color color) {
super(xPos, yPos, SPOT_RADIUS);
setFill(color);
}
}
public static void main(String... args) {
launch(args);
}
}
Further Info
For detailed information on event handling in JavaFX, see the Oracle JavaFX event tutorial.
Generally, you'd use setOnAction as shown in the Oracle tutorials.
Example:
btn.setOnAction(new EventHandler<ActionEvent>() {
public void handle(ActionEvent event) {
System.out.println("Hello World");
}
});
If the particular Node you're trying to use does not have a clickHandler method, try doing something like this (on Group for example):
group.addEventHandler(MouseEvent.MOUSE_CLICKED, new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent event) {
System.out.println("Hello!");
}
});
for my Java coursework I have to create a grid based animation. Basically I currently have a 2d array containing certain values, which change each time the program is run. For example it could be a 20x20 2d array, or a 32x32 etc. Inside the array certain values are stored, chars represent animals, and numbers represent food. The animals smell the food and then move towards the food after each cycle of the program, hence their position in the array change after each cycle. How the program works isn't really relevant to the question I'm asking.
Basically I now have to implement this in JavaFX (it currently works in the console, displaying the array as a grid each cycle). I was just wondering which control would be best to use in JavaFX to display a 2d array, or if perhaps someone could point me in the right direction of how to start coding this?
I'm new to java (and JavaFX) so am not sure of which controls to use...
I wouldn't use a control. I'd rather create a node for each of the items in the array and put them on the scene. Something like this:
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
public class NodeDemo extends Application {
private double sceneWidth = 1024;
private double sceneHeight = 768;
private int n = 10;
private int m = 10;
double gridWidth = sceneWidth / n;
double gridHeight = sceneHeight / m;
MyNode[][] playfield = new MyNode[n][m];
#Override
public void start(Stage primaryStage) {
Group root = new Group();
// initialize playfield
for( int i=0; i < n; i++) {
for( int j=0; j < m; j++) {
// create node
MyNode node = new MyNode( "Item " + i + "/" + j, i * gridWidth, j * gridHeight, gridWidth, gridHeight);
// add node to group
root.getChildren().add( node);
// add to playfield for further reference using an array
playfield[i][j] = node;
}
}
Scene scene = new Scene( root, sceneWidth, sceneHeight);
primaryStage.setScene( scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
public static class MyNode extends StackPane {
public MyNode( String name, double x, double y, double width, double height) {
// create rectangle
Rectangle rectangle = new Rectangle( width, height);
rectangle.setStroke(Color.BLACK);
rectangle.setFill(Color.LIGHTBLUE);
// create label
Label label = new Label( name);
// set position
setTranslateX( x);
setTranslateY( y);
getChildren().addAll( rectangle, label);
}
}
}
This way you can create animated movement of the nodes easily with a PathTransition. Like this shuffle mechanism:
import java.util.Random;
import javafx.animation.Animation.Status;
import javafx.animation.PathTransition;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.LineTo;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.util.Duration;
public class NodeDemo extends Application {
private double sceneWidth = 1024;
private double sceneHeight = 768;
private int n = 10;
private int m = 10;
double gridWidth = sceneWidth / n;
double gridHeight = sceneHeight / m;
MyNode[][] playfield = new MyNode[n][m];
#Override
public void start(Stage primaryStage) {
Group root = new Group();
// initialize playfield
for( int i=0; i < n; i++) {
for( int j=0; j < m; j++) {
// create node
MyNode node = new MyNode( "Item " + i + "/" + j, i * gridWidth, j * gridHeight, gridWidth, gridHeight);
// add node to group
root.getChildren().add( node);
// add to playfield for further reference using an array
playfield[i][j] = node;
}
}
Scene scene = new Scene( root, sceneWidth, sceneHeight);
primaryStage.setScene( scene);
primaryStage.show();
animate();
}
private void animate() {
Random random = new Random();
int ai = random.nextInt(n);
int aj = random.nextInt(m);
int bi = random.nextInt(n);
int bj = random.nextInt(m);
// make sure that A and B are never the same
if( ai == bi && aj == bj) {
ai++;
if( ai >= n)
ai = 0;
}
MyNode nodeA = playfield[ai][aj];
nodeA.toFront();
MyNode nodeB = playfield[bi][bj];
nodeB.toFront();
// swap on array to keep array consistent
playfield[ai][aj] = nodeB;
playfield[bi][bj] = nodeA;
// A -> B
Path pathA = new Path();
pathA.getElements().add (new MoveTo ( nodeA.getTranslateX() + nodeA.getBoundsInParent().getWidth() / 2.0, nodeA.getTranslateY() + nodeA.getBoundsInParent().getHeight() / 2.0));
pathA.getElements().add (new LineTo( nodeB.getTranslateX() + nodeB.getBoundsInParent().getWidth() / 2.0, nodeB.getTranslateY() + nodeB.getBoundsInParent().getHeight() / 2.0));
PathTransition pathTransitionA = new PathTransition();
pathTransitionA.setDuration(Duration.millis(1000));
pathTransitionA.setNode( nodeA);
pathTransitionA.setPath(pathA);
pathTransitionA.play();
// B -> A
Path pathB = new Path();
pathB.getElements().add (new MoveTo ( nodeB.getTranslateX() + nodeB.getBoundsInParent().getWidth() / 2.0, nodeB.getTranslateY() + nodeB.getBoundsInParent().getHeight() / 2.0));
pathB.getElements().add (new LineTo( nodeA.getTranslateX() + nodeA.getBoundsInParent().getWidth() / 2.0, nodeA.getTranslateY() + nodeA.getBoundsInParent().getHeight() / 2.0));
PathTransition pathTransitionB = new PathTransition();
pathTransitionB.setDuration(Duration.millis(1000));
pathTransitionB.setNode( nodeB);
pathTransitionB.setPath(pathB);
pathTransitionB.play();
pathTransitionA.setOnFinished( new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
if( pathTransitionB.getStatus() == Status.RUNNING)
return;
animate();
}
});
pathTransitionB.setOnFinished( new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
if( pathTransitionA.getStatus() == Status.RUNNING)
return;
animate();
}
});
}
public static void main(String[] args) {
launch(args);
}
public static class MyNode extends StackPane {
public MyNode( String name, double x, double y, double width, double height) {
// create rectangle
Rectangle rectangle = new Rectangle( width, height);
rectangle.setStroke(Color.BLACK);
rectangle.setFill(Color.LIGHTBLUE);
// create label
Label label = new Label( name);
// set position
setTranslateX( x);
setTranslateY( y);
getChildren().addAll( rectangle, label);
}
}
}
And here's an example about how you could handle the cells via subclassing. But that's just one way to do it:
public class NodeDemo extends Application {
private double sceneWidth = 1024;
private double sceneHeight = 768;
private int n = 10;
private int m = 10;
double gridWidth = sceneWidth / n;
double gridHeight = sceneHeight / m;
MyNode[][] playfield = new MyNode[n][m];
#Override
public void start(Stage primaryStage) {
Group root = new Group();
// initialize playfield
for( int i=0; i < n; i++) {
for( int j=0; j < m; j++) {
MyNode node = null;
// create bug
if( i == 0 && j == 0) {
node = new Bug( "Bug", Color.ORANGE, i, j);
}
// create food
else if( i == 5 && j == 5) {
node = new Food( "Food", Color.GREEN, i, j);
}
// create obstacle
else if( i == 3 && j == 3) {
node = new Obstacle( "Obstacle", Color.GRAY, i, j);
}
// add node to group
if( node != null) {
root.getChildren().add( node);
// add to playfield for further reference using an array
playfield[i][j] = node;
}
}
}
Scene scene = new Scene( root, sceneWidth, sceneHeight);
primaryStage.setScene( scene);
primaryStage.show();
// move bugs
animate();
}
private void animate() {
// TODO
}
public static void main(String[] args) {
launch(args);
}
private class Food extends MyNode {
public Food(String name, Color color, double x, double y) {
super(name, color, x, y);
}
}
private class Obstacle extends MyNode {
public Obstacle(String name, Color color, double x, double y) {
super(name, color, x, y);
}
}
private class Bug extends MyNode {
public Bug(String name, Color color, double x, double y) {
super(name, color, x, y);
}
}
private class MyNode extends StackPane {
public MyNode( String name, Color color, double x, double y) {
// create rectangle
Rectangle rectangle = new Rectangle( gridWidth, gridHeight);
rectangle.setStroke( color);
rectangle.setFill( color.deriveColor(1, 1, 1, 0.7));
// create label
Label label = new Label( name);
// set position
setTranslateX( x * gridWidth);
setTranslateY( y * gridHeight);
getChildren().addAll( rectangle, label);
}
}
}
You can start looking at the "Getting Started" section at the documentation. Focus on the simple examples like the HelloWorld and LoginForm sample programs.
For you structure you'll probably want to use a GridPane.