How to draw an equilateral triangle in JavaFX? - javafx

I'm trying to create a equilateral triangle with JavaFX. It is said that use the Polygon and setLayoutX() and setLayoutY(). So how to do that? This is the code I tried:
#Override public void start(Stage stage) throws Exception {
stage.setTitle("Board");
StackPane root = new StackPane();
Scene scene = new Scene(root, 600, 519);
stage.setScene(scene);
Polygon triangle = new Polygon();
stage.show();
}

Two problems:
You did not add the polygon to the container
You did not define the points of the polygon
Your code should be something like this:
#Override
public void start (Stage stage) throws Exception {
stage.setTitle("Board");
Polygon triangle = new Polygon();
//triangle.setLayoutX(100);
//triangle.setLayoutY(400);
triangle.getPoints()
.addAll(new Double[] {300.0, 50.0, 250.0, 100.0, 350.0, 100.0,});
Group root = new Group(triangle); // You can replace with StackPane for center alignment
Scene scene = new Scene(root, 600, 519);
stage.setScene(scene);
stage.show();
}
Once you do that, you should see something like the image below. You need to figure out the (x,y) coordinates for your triangle.
When I uncommented the setLayoutX() and setLayoutY() lines, the result was like the image below.
If you need a drawing in Java FX tutorial, check out this site.

Related

How to set an image in a circle

How could I set an image in a circle. Is there a better way to set an image with a circled frame? (particularly the image frame on windows 10 login screen)
Circle cir2 = new Circle(250,200,80);
cir2.setStroke(Color.SEAGREEN);
cir2.setFill(Color.SNOW);
cir2.setEffect(new DropShadow(+25d, 0d, +2d, Color.DARKSEAGREEN));
ImagePattern is what you are looking for.
It fills a Shape with an Image, so your code might look like this
cir2.setFill(new ImagePattern(Image));
test code
public void start(Stage primaryStage) {
try {
BorderPane root = new BorderPane();
root.setPadding(new Insets(10));
Scene scene = new Scene(root,400,400);
Label l = new Label("SHAPE IMAGE OF MY SISTER");
l.setFont(Font.font(Font.getFontNames().get(23), FontWeight.EXTRA_BOLD, 14));
l.setAlignment(Pos.CENTER);
l.setPrefWidth(Double.MAX_VALUE);
root.setTop(l);
///////////////important code starts from here
Circle cir2 = new Circle(250,250,120);
cir2.setStroke(Color.SEAGREEN);
Image im = new Image("https://juicylinksmag.files.wordpress.com/2016/02/juliet-ibrahim.jpg",false);
cir2.setFill(new ImagePattern(im));
cir2.setEffect(new DropShadow(+25d, 0d, +2d, Color.DARKSEAGREEN));
//////////////important code ends here
root.setCenter(cir2);
primaryStage.setScene(scene);
primaryStage.show();
} catch(Exception e) {
e.printStackTrace();
}
}

Connecting Circles with a Polyline JavaFX

I have created circles on a graph in JavaFX, and I want to connect those circles with a polyline. Does anyone know the syntax for doing this? Thanks!
A Polyline may work, but you can do this easier, if you use the Path class, since this allows you to access to the individual elements of the path (PathElements). You can use bindings to bind the position of the line points to the positions of the circles. This way the lines will stay at the appropriate positions, even if you move the circles later.
Example
private static void bindLinePosTo(Circle circle, LineTo lineTo) {
lineTo.xProperty().bind(circle.centerXProperty());
lineTo.yProperty().bind(circle.centerYProperty());
}
private static void animate(Circle circle, Duration duration, double dy) {
Timeline animation = new Timeline(
new KeyFrame(Duration.ZERO, new KeyValue(circle.centerYProperty(), circle.getCenterY())),
new KeyFrame(duration, new KeyValue(circle.centerYProperty(), circle.getCenterY()+dy)));
animation.setAutoReverse(true);
animation.setCycleCount(Animation.INDEFINITE);
animation.play();
}
#Override
public void start(Stage primaryStage) {
MoveTo start = new MoveTo();
LineTo line1 = new LineTo();
LineTo line2 = new LineTo();
Circle c1 = new Circle(10, 100, 5);
Circle c2 = new Circle(50, 100, 5);
Circle c3 = new Circle(100, 100, 5);
c1.setFill(Color.RED);
c2.setFill(Color.RED);
c3.setFill(Color.RED);
start.xProperty().bind(c1.centerXProperty());
start.yProperty().bind(c1.centerYProperty());
bindLinePosTo(c2, line1);
bindLinePosTo(c3, line2);
Path path = new Path(start, line1, line2);
Pane root = new Pane(path, c1, c2, c3);
animate(c1, Duration.seconds(1), 100);
animate(c2, Duration.seconds(2), 50);
animate(c3, Duration.seconds(0.5), 150);
Scene scene = new Scene(root, 110, 300);
primaryStage.setScene(scene);
primaryStage.show();
}
Use the Binding API, e. g. like this.

javafx 8 overlapping layers eventhandling

I have two layers in my program with different elements in each layer. The two layers are overlapping but the elements in the layers are not. I want to show a tooltip when the mouse hovers over a node in each layer but right now the top layer only gets the event.
Below is attached a minimal example:
public class Main extends Application {
#Override
public void start(Stage primaryStage) throws Exception{
StackPane root = new StackPane();
Pane p1 = new Pane();
Pane p2 = new Pane();
Arc arc = new Arc(150,150,100,100,0,360);
arc.setType(ArcType.CHORD);
arc.setFill(null);
arc.setStroke(Color.BLUE);
arc.setStrokeWidth(20);
Rectangle rectangle = new Rectangle(100,100);
rectangle.setX(100);
rectangle.setY(100);
Tooltip.install(arc, new Tooltip("Semiring"));
Tooltip .install(rectangle,new Tooltip("Rectangle"));
p1.getChildren().add(arc);
p2.getChildren().add(rectangle);
root.getChildren().addAll(p2,p1);
primaryStage.setScene(new Scene(root, 300, 300));
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
Nothing happens on the rectangle
Use
p1.setPickOnBounds(false);
This essentially means mouse events are only delivered to p1 if the mouse is over a non-transparent pixel in p1. Thus when the mouse is not over the arc, mouse handling is delegated to p2, as required.

How to keep angle of DropShadow when node is rotated

When you apply a DropShadow on a node which is rotated, then the DropShadow rotates with it. Is there a simple way to keep the DropShadow angle where it is, e. g. bottom right even when the node is rotated?
I know that it would work if I put all the nodes into a group and apply the shadow on the group, but that's unfortunately not an option in my case.
Sample image:
left rectangle with drop shadow
right rectangle with same drop shadow, but rotated by 180 degrees
You see, it looks wrong with the shadows being in opposite directions.
Code
public class HelloEffects extends Application {
Stage stage;
Scene scene;
#Override
public void start(Stage stage) {
Group group = new Group();
DropShadow ds1 = new DropShadow();
ds1.setOffsetY(4.0f);
ds1.setOffsetX(4.0f);
ds1.setColor(Color.BLACK);
Rectangle rect1 = new Rectangle( 100, 200);
rect1.relocate(100, 100);
rect1.setEffect(ds1);
rect1.setFill(Color.RED);
Rectangle rect2 = new Rectangle( 100, 200);
rect2.relocate(300, 100);
rect2.setEffect(ds1);
rect2.setFill(Color.RED);
rect2.setRotate(180);
group.getChildren().addAll(rect1, rect2);
scene = new Scene( group, 840, 680);
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
Application.launch(args);
}
}
You should add a container to rect2 and apply the effect on the container, the container can be either Pane or Group:
Group rect2Container = new Group(rect2);
rect2Container.setEffect(ds1);
group.getChildren().addAll(rect1, rect2Container);

Javafx - How to set drag range for components added in a pane

i have tried a below sample, in which left area of border Pane will have list of components and center of the border pane will act as a canvas area and here i have added a rectangle on run time as children to a Pane which is set to Center portion of BorderPane. But when drag the rectangle it moving outof the area allocated for the center, so how could i make this drag around only inside the Center Pane.
#Override
public void start(Stage stage) throws Exception {
stage.setTitle("BPM");
BorderPane border = new BorderPane();
Pane canvas = new Pane();
canvas.setStyle("-fx-background-color: #F0F0F0;");
border.setLeft(compList());
border.setCenter(canvas);
//
Anchor start = new Anchor(null, "Start", Color.PALEGREEN, new SimpleDoubleProperty(170), new SimpleDoubleProperty(170));
final Rect rect=new Rect(100, 70,new SimpleDoubleProperty(10), new SimpleDoubleProperty(100));
rect.setX(100);
rect.setY(100);
canvas.getChildren().add(rect);
canvas.getChildren().add(start);
Scene scene = new Scene(border, 800, 600);
stage.setScene(scene);
stage.show();
}
Actually, by default, the Pane class does not ensure that all its children are clipping hence there are possibility that the children might go out of the boundary of the Pane. To ensure that all children (in your case, the rectangle) are dragged within specify boundary, you have to manually check the boundary as you dragging the children. Below are example of my implementation:
#Override
public void start(Stage stage){
stage.setTitle("BPM");
BorderPane mainPanel = new BorderPane();
VBox nameList = new VBox();
nameList.getChildren().add(new Label("Data"));
nameList.setPrefWidth(150);
Pane canvas = new Pane();
canvas.setStyle("-fx-background-color: #ffe3c3;");
canvas.setPrefSize(400,300);
Circle anchor = new Circle(10);
double rectWidth = 50, rectHeight = 50;
Rectangle rect = new Rectangle(50,50);
rect.setX(100);
rect.setY(100);
canvas.getChildren().addAll(rect, anchor);
// set the clip boundary
Rectangle bound = new Rectangle(400,300);
canvas.setClip(bound);
rect.setOnMouseDragged(event -> {
Point2D currentPointer = new Point2D(event.getX(), event.getY());
if(bound.getBoundsInLocal().contains(currentPointer)){
if(currentPointer.getX() > 0 &&
(currentPointer.getX() + rectWidth) < bound.getWidth()){
rect.setX(currentPointer.getX());
}
if(currentPointer.getY() > 0 &&
(currentPointer.getY() + rectHeight) < bound.getHeight()){
rect.setY(currentPointer.getY());
}
}
});
mainPanel.setLeft(nameList);
mainPanel.setCenter(canvas);
Scene scene = new Scene(mainPanel, 800, 600);
stage.setScene(scene);
stage.show();
}

Resources