I was confused by one of the exercises of my book. It requires me to create a circle on the position of my mouse arrow every time when I click Mouse Left button, and then delete this node if my mouse is just in this circle and I click the right button. Adding circle into pane is so easy, so I could finish it quickly but remove it quite hard, so I was trapped in this part, could someone add some codes in order to delete the circle?
package com.company;
import javafx.application.Application;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.input.MouseButton;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;
import java.util.ArrayList;
public class AddOrDeletePoint extends Application {
#Override
public void start(Stage primaryStage) {
Pane pane = new Pane();
double radius = 5;
pane.setOnMouseClicked(e -> {
double X = e.getSceneX();
double Y = e.getSceneY();
Circle circle = new Circle(X, Y, radius);
circle.setFill(Color.WHITE);
circle.setStroke(Color.BLACK);
if (e.getButton() == MouseButton.PRIMARY) {
pane.getChildren().add(circle);
} else if (e.getButton() == MouseButton.SECONDARY) {
pane.getChildren().remove(circle);//this is the remove part, but it does not work!
}
});
Scene scene = new Scene(pane);
primaryStage.setScene(scene);
primaryStage.show();
}
}
So just like this, how to remove the circle from the pane if my mouse stays on that circle and then click the right button?
You always create a circle. In case the secondary button is clicked, this circle was never added to the scene and nothing is removed from the child list of pane. You need to remove a existing circle.
Register the "Remove circle" listener to the circles you create:
pane.setOnMouseClicked(e -> {
if (e.getButton() == MouseButton.PRIMARY) {
double X = e.getX(); // remove pane's coordinate system here
double Y = e.getY(); // remove pane's coordinate system here
final Circle circle = new Circle(X, Y, radius);
circle.setFill(Color.WHITE);
circle.setStroke(Color.BLACK);
circle.setOnMouseClicked(evt -> {
if (evt.getButton() == MouseButton.SECONDARY) {
evt.consume();
pane.getChildren().remove(circle);
}
});
pane.getChildren().add(circle);
}
});
Alternatively you could use the pick result:
pane.setOnMouseClicked(e -> {
if (e.getButton() == MouseButton.PRIMARY) {
double X = e.getX(); // remove pane's coordinate system here
double Y = e.getY(); // remove pane's coordinate system here
Circle circle = new Circle(X, Y, radius);
circle.setFill(Color.WHITE);
circle.setStroke(Color.BLACK);
pane.getChildren().add(circle);
} else if (e.getButton() == MouseButton.SECONDARY) {
// check if cicle was clicked and remove it if this is the case
Node picked = e.getPickResult().getIntersectedNode();
if (picked instanceof Circle) {
pane.getChildren().remove(picked);
}
}
});
Related
I have a javafx program that generates a canvas where a user can draw an Ellipse. I am using the press down, drag and release technique for the mouse.
However I want to be able to scale the shape in size from the top left corner of the shape (much like a Rectangle is scaled) rather than its center. Is there any suggestions to how I could achieve this?
#Override
public void start(Stage ellipseStage) {
//Create ellipse
ellipsePane = new Pane();
ellipsePane.setMinSize(600,600);
ellipsePane.setOnMousePressed(e -> {
if (e.getButton() == MouseButton.PRIMARY) {
ellipse = new Ellipse();
ellipse.setCenterX(e.getX());
ellipse.setCenterY(e.getY());
ellipse.setStroke(Color.ORANGE);
ellipse.setFill(Color.BLACK);
ellipsePane.getChildren().add(ellipse);
}
//if we double click
if (e.getClickCount() == 2) {
ellipse = null;
}
});
//When the mouse is dragged the ellipse expands
ellipsePane.setOnMouseDragged(e -> {
if (ellipse != null) {
ellipse.setRadiusX(e.getX() - ellipse.getCenterX());
ellipse.setRadiusY(e.getY() - ellipse.getCenterY());
}
});
Scene scene = new Scene(ellipsePane);
ellipseStage.setScene(scene);
ellipseStage.show();
}
public static void main(String[] args) {
launch(args);
}}
One option is to keep track of the location of the original mouse press, then set the center X/Y properties of the Ellipse to always be the midpoint between the origin and where the mouse is currently (i.e. where it's dragged). The radii would be half the distance between the origin and the current location as well. Here's an example:
import javafx.application.Application;
import javafx.geometry.Point2D;
import javafx.scene.Scene;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.Pane;
import javafx.scene.shape.Ellipse;
import javafx.stage.Stage;
public class Main extends Application {
private Pane pane;
private Point2D origin;
private Ellipse ellipse;
#Override
public void start(Stage primaryStage) {
pane = new Pane();
pane.setOnMousePressed(this::handleMousePressed);
pane.setOnMouseDragged(this::handleMouseDragged);
pane.setOnMouseReleased(this::handleMouseReleased);
primaryStage.setScene(new Scene(pane, 600.0, 400.0));
primaryStage.show();
}
private void handleMousePressed(MouseEvent event) {
event.consume();
origin = new Point2D(event.getX(), event.getY());
ellipse = new Ellipse(event.getX(), event.getY(), 0.0, 0.0);
pane.getChildren().add(ellipse);
}
private void handleMouseDragged(MouseEvent event) {
event.consume();
ellipse.setCenterX((origin.getX() + event.getX()) / 2.0);
ellipse.setCenterY((origin.getY() + event.getY()) / 2.0);
ellipse.setRadiusX(Math.abs(event.getX() - origin.getX()) / 2.0);
ellipse.setRadiusY(Math.abs(event.getY() - origin.getY()) / 2.0);
}
private void handleMouseReleased(MouseEvent event) {
event.consume();
ellipse = null;
origin = null;
}
}
So I presume what you mean is that when you drag the ellipse, the edge position changes but you want the edge position to stay the same and the center to move.
ellipsePane.setOnMouseDragged(e -> {
if (ellipse != null) {
double x0 = ellipse.getCenterX() - ellipse.getRadiusX();
double y0 = ellipse.getCenterY() - ellipse.getRadiusY();
//the new radii
double rxp = e.getX() - x0;
double ryp = e.getY() - y0;
//the new center positions. to keep the origin the same.
double cx = x0 + rxp;
double cy = y0 + ryp;
ellipse.setRadiusX(rxp);
ellipse.setRadiusY(ryp);
ellipse.setCenterX(cx);
ellipse.setCenterY(cy);
}
});
I'm building a grid out of rectangles.
I want to click one of the rectangles and its color should change.
However, I dont know how to access the rectangles in Main AFTER they've been created.
Main:
import javafx.application.Application;
import javafx.collections.ObservableList;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.scene.shape.Shape;
import javafx.stage.Stage;
public class Main extends Application{
public static void main(String[] args) {
launch(args);
}
public void changeColor(Pane p) {
p.setOnMouseClicked(me -> {
double posX = me.getX();
double posY = me.getY();
int colX = (int)(posX / 30);
int colY = (int) (posY / 30);
ObservableList<Node> children = p.getChildren();
for( Node d : children) {
if(d.getLayoutX() == colX && d.getLayoutY() == colY) {
// how can i access my rectangle here?
// basically, i want to be able to do .setFill()
}
}
});
}
#Override
public void start(Stage primaryStage) throws Exception {
Grid g = new Grid(30,30, 30);
Pane window = g.render();
Scene scene = new Scene(window, 500, 500);
primaryStage.setScene(scene);
primaryStage.show();
this.changeColor(window);
}
}
Grid:
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
public class Grid {
Integer width, height, squareSize;
Color fill = Color.ALICEBLUE,
stroke = Color.BLACK;
public Grid(int x, int y, int squareSize){
this.width = x;
this.height = y;
this.squareSize = squareSize;
}
public Pane render() {
Pane p = new Pane();
Rectangle [][] rect = new Rectangle[this.width][this.height];
for(int i = 0; i < this.width; i++) {
for(int j = 0; j < this.height; j++) {
rect[i][j] = new Rectangle();
rect[i][j].setX(i * width);
rect[i][j].setY(j * height);
rect[i][j].setWidth(this.squareSize);
rect[i][j].setHeight(this.squareSize);
rect[i][j].setFill(this.fill);
rect[i][j].setStroke(this.stroke);
p.getChildren().add(rect[i][j]);
}
}
return p;
}
}
Can someone please help me to figure out how I can access my rectangles again in the main file?
Keeping with your current design, you simply need to test if the mouse clicked within a child and if that child is an instance of Rectangle; then you can cast and call setFill. However, I recommend changing the name of changeColor as that name does not represent what that method is doing.
public void installChangeColorHandler(Pane pane) {
pane.setOnMouseClicked(event -> {
for (Node child : pane.getChildren()) {
if (child instanceof Rectangle
&& child.contains(child.parentToLocal(event.getX(), event.getY()))) {
((Rectangle) child).setFill(/* YOUR COLOR */);
event.consume();
break;
}
}
});
}
Since the event handler is added to Pane the x and y mouse coordinates are relative to said Pane. But since your Rectangles are direct children of Pane we can call Node.parentToLocal to transform those coordinates into the Rectangle's space1. We then need to test if the bounds of the Rectangle contain those coordinates using Node.contains; if it does, change the fill.
That said, you may want to modify your code so that you're adding an/the EventHandler directly to the Rectangles. That way you can use Event.getSource(). For instance2:
public Pane render(EventHandler<MouseEvent> onClick) {
// outer loop...
// inner loop...
Rectangle r = new Rectangle();
// configure r...
r.setOnMouseClicked(onClick);
// end inner loop...
// end outer loop...
}
...
// may want to consume event
Pane window = new Grid(30, 30, 30).render(event ->
((Rectangle) event.getSource()).setFill(/* YOUR COLOR */));
1. Even if they weren't direct children you can still transform the coordinates into the local space. For example, you can use Node.sceneToLocal and the scene coordinates provided by the MouseEvent (i.e. getSceneX()/getSceneY()).
2. This is still staying close to your design. You may want to rethink things, however, into a proper MVC (or other) architecture. Applying MVC With JavaFx
I am trying to create a very simple, easy-to-use program that actively reads and displays the position of the mouse. I have seen many tutorials that create programs that read the position of the mouse only when it is inside the window of the GUI application, or after hitting a button, but I want one that displays the position of the mouse in all areas of the screen. This is what I have:
import java.awt.MouseInfo;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class MouseCoordinates extends Application{
public static void main(String[] args) {
launch();
}
public void start(Stage primaryStage) throws Exception{
primaryStage.setTitle("Mouse Reader");
Label x = new Label();
Label y = new Label();
StackPane layout = new StackPane();
layout.getChildren().addAll(x, y);
Scene scene = new Scene(layout, 600, 500);
primaryStage.setScene(scene);
primaryStage.show ();
double mouseX = 1.0;
double mouseY = 1.0;
while(true){
mouseX = MouseInfo.getPointerInfo().getLocation().getX();
mouseY = MouseInfo.getPointerInfo().getLocation().getY();
x.setText("" + mouseX);
y.setText("" + mouseY);
}
}
}
I understand that this while-loop is the cause of the window crashing, but I can not figure out a way around it. Can anyone explain why I can not use a while-loop for JavaFX, as well as a way to solve this?
Your start() method don't have any change to exit the loop and therefore to return as you defined an infinite loop : while(true){...} without return statement.
Why not use a Timeline ?
Timeline timeLine = new Timeline(new KeyFrame(Duration.seconds(1), new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
mouseX = MouseInfo.getPointerInfo().getLocation().getX();
mouseY = MouseInfo.getPointerInfo().getLocation().getY();
x.setText("" + mouseX);
y.setText("" + mouseY);
}
}));
timeLine.setCycleCount(Timeline.INDEFINITE);
timeLine.play();
or with a lambda :
Timeline timeLine = new Timeline(new KeyFrame(Duration.seconds(1),
e -> {
mouseX = MouseInfo.getPointerInfo().getLocation().getX();
mouseY = MouseInfo.getPointerInfo().getLocation().getY();
x.setText("" + mouseX);
y.setText("" + mouseY);
}
));
timeLine.setCycleCount(Timeline.INDEFINITE);
timeLine.play();
Another way to address your requirement could be using addEventFilter( MouseEvent.MOUSE_MOVED) on the StackPane object :
layout.addEventFilter(MouseEvent.MOUSE_MOVED, e -> {
x.setText("" + e.getScreenX());
y.setText("" + e.getScreenY());
});
The MouseEvent class provides both X and Y absolute position on the device and
on the source component :
getScreenX()
Returns absolute horizontal position of the event.
getScreenY()
Returns the absolute vertical y position of the event
getX();
Horizontal position of the event relative to the origin of the
MouseEvent's source.
getY();
Vertical position of the event relative to the origin of the
MouseEvent's source.
I wrote the following code for adding and deleting points or circles with mouse events. The next step is joining them with a line while I'm creating them (creating a polygon). I'm completely stuck and do not know where to start. I am looking for documentation but I will appreciate if somebody could point me in the right direction.
package application;
//import all needed classes
import javafx.collections.ObservableList;
import javafx.scene.input.MouseButton;
import javafx.application.Application;
import javafx.scene.shape.Circle;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.Node;
public class Main extends Application {
// using the base class of layout panes
Pane pane = new Pane();
#Override
public void start(Stage primaryStage) {
// what to do when the mouse is clicked
pane.setOnMouseClicked(e -> {
double drawX = e.getX();// position of mouse in X axle
double drawY = e.getY();// position of mouse in y axle
if (e.getButton() == MouseButton.PRIMARY) {// get the position of the mouse point when user left click
Circle circle = makeCircle(drawX, drawY);// using the makeCircle method to draw the circle where the mouse is at the click
pane.getChildren().add(circle);
} else if (e.getButton() == MouseButton.SECONDARY) {
deleteCircle(drawX, drawY);// using the deleteCircle function to delete the circle if right click on the circle
}
});
// container to show all context in a 500px by 500px windows
try {
Scene scene = new Scene(pane, 500, 500);// size of the scene
primaryStage.setScene(scene);
primaryStage.show();
} catch (Exception e) {
e.printStackTrace();
}
}
// method to draw the circle when left click
private Circle makeCircle(double drawX, double drawY) {
Circle circle = new Circle(drawX, drawY, 7, Color.CORAL);// create the circle and its properties(color: coral to see it better)
circle.setStroke(Color.BLACK);// create the stroke so the circle is more visible
return circle;
}
// method to delete the circle using the ObservableList class
private void deleteCircle(double deletX, double deleteY) {
// loop to create my list of circles 'til this moment
ObservableList<Node> list = pane.getChildren();
for (int i = list.size() - 1; i >= 0; i--) {
Node circle = list.get(i);
// checking which circle I want to delete
if (circle instanceof Circle && circle.contains(deletX, deleteY)) {
pane.getChildren().remove(circle);
break;
}
}
}
public static void main(String[] args) {
Application.launch(args);
}
}
I would add a change listener to the children of your pane, add a polygon to the pane and if there are more then 2 Circles, you redraw the polygon:
public class Main extends Application {
// using the base class of layout panes
Pane pane = new Pane();
Polygon polygon = new Polygon();
#Override
public void start(Stage primaryStage) {
// what to do when the mouse is clicked
pane.setOnMouseClicked(e -> {
double drawX = e.getX();// position of mouse in X axle
double drawY = e.getY();// position of mouse in y axle
if (e.getButton() == MouseButton.PRIMARY) {// get the position of the mouse point when user left click
Circle circle = makeCircle(drawX, drawY);// using the makeCircle method to draw the circle where the mouse is at the click
pane.getChildren().add(circle);
} else if (e.getButton() == MouseButton.SECONDARY) {
deleteCircle(drawX, drawY);// using the deleteCircle function to delete the circle if right click on the circle
}
});
pane.getChildren().add(polygon);
pane.getChildren().addListener(new ListChangeListener<Node>() {
#Override
public void onChanged(Change<? extends Node> c) {
int numOfCircles = pane.getChildren().size() - 1;
if ( numOfCircles >= 2 ) {
polygon.setStroke(Color.BLACK);
polygon.getPoints().clear();
for ( int i = 0; i <= numOfCircles; i++ ) {
Node node = pane.getChildren().get(i);
if ( node.getClass() == Circle.class ) {
polygon.getPoints().addAll(
((Circle) node).getCenterX(),
((Circle) node).getCenterY()
);
}
}
System.out.println(polygon.getPoints());
}
}
});
// container to show all context in a 500px by 500px windows
try {
Scene scene = new Scene(pane, 500, 500);// size of the scene
primaryStage.setScene(scene);
primaryStage.show();
} catch (Exception e) {
e.printStackTrace();
}
}
// method to draw the circle when left click
private Circle makeCircle(double drawX, double drawY) {
Circle circle = new Circle(drawX, drawY, 7, Color.CORAL);// create the circle and its properties(color: coral to see it better)
circle.setStroke(Color.BLACK);// create the stroke so the circle is more visible
return circle;
}
// method to delete the circle using the ObservableList class
private void deleteCircle(double deletX, double deleteY) {
// loop to create my list of circles 'til this moment
ObservableList<Node> list = pane.getChildren();
for (int i = list.size() - 1; i >= 0; i--) {
Node circle = list.get(i);
// checking which circle I want to delete
if (circle instanceof Circle && circle.contains(deletX, deleteY)) {
pane.getChildren().remove(circle);
break;
}
}
}
public static void main(String[] args) {
Application.launch(args);
}
}
You can also not use the change listener, but call the redraw whenever you add or delete a circle. In addition you can also add an onclick listener to each circle calling the delete function and deleting in a more efficient manner:
public class Main extends Application {
// using the base class of layout panes
Pane pane = new Pane();
Polygon polygon = new Polygon();
#Override
public void start(Stage primaryStage) {
// what to do when the mouse is clicked
pane.setOnMouseClicked(e -> {
double drawX = e.getX();// position of mouse in X axle
double drawY = e.getY();// position of mouse in y axle
if (e.getButton() == MouseButton.PRIMARY) {// get the position of the mouse point when user left click
Circle circle = makeCircle(drawX, drawY);// using the makeCircle method to draw the circle where the mouse is at the click
pane.getChildren().add(circle);
circle.setOnMouseClicked( event -> {
deleteCircle(circle);
// consume event so that the pane on click does not get called
event.consume();
});
redrawPolygon();
}
});
polygon = new Polygon();
polygon.setFill(Color.TRANSPARENT);
polygon.setStroke(Color.BLACK);
pane.getChildren().add(polygon);
// container to show all context in a 500px by 500px windows
try {
Scene scene = new Scene(pane, 500, 500);// size of the scene
primaryStage.setScene(scene);
primaryStage.show();
} catch (Exception e) {
e.printStackTrace();
}
}
// method to draw the circle when left click
private Circle makeCircle(double drawX, double drawY) {
Circle circle = new Circle(drawX, drawY, 7, Color.CORAL);// create the circle and its properties(color: coral to see it better)
circle.setStroke(Color.BLACK);// create the stroke so the circle is more visible
return circle;
}
private void redrawPolygon() {
int numOfCircles = pane.getChildren().size() - 1;
if ( numOfCircles > 0 ) {
polygon.getPoints().clear();
for ( int i = 0; i <= numOfCircles; i++ ) {
Node node = pane.getChildren().get(i);
if ( node.getClass() == Circle.class ) {
polygon.getPoints().addAll(
((Circle) node).getCenterX(),
((Circle) node).getCenterY()
);
}
}
}
}
private void deleteCircle(Circle circle){
pane.getChildren().remove(circle);
redrawPolygon();
}
public static void main(String[] args) {
Application.launch(args);
}
}
If you want to only use one click handler you could also do it this way:
pane.setOnMouseClicked(e -> {
if ( e.getTarget().getClass() == Circle.class ) {
deleteCircle((Circle)e.getTarget());
} else {
Circle circle = makeCircle(e.getX(), e.getY());// using the makeCircle method to draw the circle where the mouse is at the click
pane.getChildren().add(circle);
redrawPolygon();
}
});
I don't understand why this is happening. Currently I'm trying to drag a node (Canvas) by right clicking it, holding right click down, and moving the mouse. At first it's smooth, but then it starts getting this weird jitter. This only occurs while I hold down the mouse button. If you release it, then it goes back to normal (but can very quickly get jittery again).
With some debugging, it appears that the more you move it, you gain this 'imprecision' between each drag event where the mouse position goes out of sync more and more. The end result is that it flip flops back and forth, which looks very bad.
Code being used:
Main.java
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
public class Main extends Application {
#Override
public void start(Stage primaryStage) {
try {
FXMLLoader fxmlLoader = new FXMLLoader(Main.class.getResource("CanvasPane.fxml"));
Pane root = fxmlLoader.load();
Scene scene = new Scene(root, 512, 512);
primaryStage.setScene(scene);
primaryStage.show();
} catch(Exception e) {
e.printStackTrace();
}
}
public static void main(String[] args) {
launch(args);
}
}
Controller.java
import javafx.fxml.FXML;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.input.MouseButton;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.StrokeLineCap;
import javafx.scene.shape.StrokeLineJoin;
public class Controller {
#FXML
private Pane rootPane;
#FXML
private Canvas canvas;
private double mouseX;
private double mouseY;
#FXML
private void initialize() {
GraphicsContext gc = canvas.getGraphicsContext2D();
// Set the writing pen.
gc.setLineCap(StrokeLineCap.ROUND);
gc.setLineJoin(StrokeLineJoin.ROUND);
gc.setLineWidth(1);
gc.setStroke(Color.BLACK);
// Set the background to be transparent.
gc.setFill(Color.BLUE);
gc.fillRect(0, 0, 256, 256);
// Handle moving the canvas.
canvas.setOnMousePressed(e -> {
if (e.getButton() == MouseButton.PRIMARY) {
gc.moveTo(e.getX(), e.getY());
} else if (e.getButton() == MouseButton.SECONDARY) {
mouseX = e.getX();
mouseY = e.getY();
}
});
canvas.setOnMouseDragged(e -> {
if (e.getButton() == MouseButton.PRIMARY) {
gc.lineTo(e.getX(), e.getY());
gc.stroke();
} else if (e.getButton() == MouseButton.SECONDARY) {
double newMouseX = e.getX();
double newMouseY = e.getY();
double deltaX = newMouseX - mouseX;
double deltaY = newMouseY - mouseY;
canvas.setLayoutX(canvas.getLayoutX() + deltaX);
canvas.setLayoutY(canvas.getLayoutY() + deltaY);
mouseX = newMouseX;
mouseY = newMouseY;
// Debug: Why is this happening?
if (Math.abs(deltaX) > 4 || Math.abs(deltaY) > 4)
System.out.println(deltaX + " " + deltaY);
}
});
}
}
CanvasPane.fxml
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.canvas.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.Pane?>
<Pane fx:id="rootPane" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="0.0" minWidth="0.0" prefHeight="512.0" prefWidth="512.0" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1" fx:controller="your-controller-here">
<children>
<Canvas fx:id="canvas" height="256.0" layoutX="122.0" layoutY="107.0" width="256.0" />
</children>
</Pane>
USAGE INSTRUCTIONS
1) Run application
2) Right click on the canvas and move it very slightly (like only one pixel per second)
3) Move it a bit faster so the debug prints
4) When you go back to moving slow, for some reason you'll see it hopping back and forth (like the delta movement between the old and new position is greater than 5 pixels) even though you only moved it one pixel.
It then appears to try to fix itself next time you move, which gives it an ugly jittery look.
The reason I'm confused is because there are times where it works great, and then the accuracy just drops as you continue dragging.
Did I code something wrong, or is this a potential bug?
The coordinates you are measuring with MouseEvent.getX() and MouseEvent.getY() are relative to the node on which the event occurred: i.e. relative to your Canvas. Since you then move the canvas, the old coordinates are now incorrect (since they were relative to the old position, not the new one). Consequently your values for deltaX and deltaY are incorrect.
To fix this, just measure relative to something that is "fixed", e.g. the Scene. You can do this by using MouseEvent.getSceneX() and MouseEvent.getSceneY().
import javafx.fxml.FXML;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.input.MouseButton;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.StrokeLineCap;
import javafx.scene.shape.StrokeLineJoin;
public class CanvasDragController {
#FXML
private Pane rootPane;
#FXML
private Canvas canvas;
private double mouseX;
private double mouseY;
#FXML
private void initialize() {
GraphicsContext gc = canvas.getGraphicsContext2D();
// Set the writing pen.
gc.setLineCap(StrokeLineCap.ROUND);
gc.setLineJoin(StrokeLineJoin.ROUND);
gc.setLineWidth(1);
gc.setStroke(Color.BLACK);
// Set the background to be transparent.
gc.setFill(Color.BLUE);
gc.fillRect(0, 0, 256, 256);
// Handle moving the canvas.
canvas.setOnMousePressed(e -> {
if (e.getButton() == MouseButton.PRIMARY) {
gc.moveTo(e.getX(), e.getY());
} else if (e.getButton() == MouseButton.SECONDARY) {
mouseX = e.getSceneX();
mouseY = e.getSceneY();
}
});
canvas.setOnMouseDragged(e -> {
if (e.getButton() == MouseButton.PRIMARY) {
gc.lineTo(e.getX(), e.getY());
gc.stroke();
} else if (e.getButton() == MouseButton.SECONDARY) {
double newMouseX = e.getSceneX();
double newMouseY = e.getSceneY();
double deltaX = newMouseX - mouseX;
double deltaY = newMouseY - mouseY;
canvas.setLayoutX(canvas.getLayoutX() + deltaX);
canvas.setLayoutY(canvas.getLayoutY() + deltaY);
mouseX = newMouseX;
mouseY = newMouseY;
// Why is this happening?
if (Math.abs(deltaX) > 4 || Math.abs(deltaY) > 4)
System.out.println(deltaX + " " + deltaY);
}
});
}
}
An alternative approach (which is not quite as intuitive, to me at least) is to use MouseEvent.getX() and MouseEvent.getY() but not to update the "last coordinates" of the mouse. The way to think of this is that, as the node is dragged around, you want it not to be moving in relation to the mouse - in other words you want the node to move so that the coordinates of the mouse remain fixed relative to it. This version looks like:
import javafx.fxml.FXML;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.input.MouseButton;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.StrokeLineCap;
import javafx.scene.shape.StrokeLineJoin;
public class CanvasDragController {
#FXML
private Pane rootPane;
#FXML
private Canvas canvas;
private double mouseX;
private double mouseY;
#FXML
private void initialize() {
GraphicsContext gc = canvas.getGraphicsContext2D();
// Set the writing pen.
gc.setLineCap(StrokeLineCap.ROUND);
gc.setLineJoin(StrokeLineJoin.ROUND);
gc.setLineWidth(1);
gc.setStroke(Color.BLACK);
// Set the background to be transparent.
gc.setFill(Color.BLUE);
gc.fillRect(0, 0, 256, 256);
// Handle moving the canvas.
canvas.setOnMousePressed(e -> {
if (e.getButton() == MouseButton.PRIMARY) {
gc.moveTo(e.getX(), e.getY());
} else if (e.getButton() == MouseButton.SECONDARY) {
mouseX = e.getX();
mouseY = e.getY();
}
});
canvas.setOnMouseDragged(e -> {
if (e.getButton() == MouseButton.PRIMARY) {
gc.lineTo(e.getX(), e.getY());
gc.stroke();
} else if (e.getButton() == MouseButton.SECONDARY) {
double newMouseX = e.getX();
double newMouseY = e.getY();
double deltaX = newMouseX - mouseX;
double deltaY = newMouseY - mouseY;
canvas.setLayoutX(canvas.getLayoutX() + deltaX);
canvas.setLayoutY(canvas.getLayoutY() + deltaY);
// Why is this happening?
if (Math.abs(deltaX) > 4 || Math.abs(deltaY) > 4)
System.out.println(deltaX + " " + deltaY);
}
});
}
}