Drawing inside a scroll in JavaFX8
After hours of searching, I could not find a solution to the problem.
I have a simple drawing application where I have a rectangle to draw lines. This rectangle must be inside the Scrollpane, so if it is larger than the program window, the user simply scrolls to a different location.
Here's my current approach:
/**
* @param args the command line arguments
*/
public static void main(String[] args) {
Application.launch(args);
}
@Override
public void start(Stage primaryStage) {
primaryStage.setTitle("Drawing Board Demo");
final Group root = new Group();
Scene scene = new Scene(root, 600, 800);
// A group to hold all the drawn path elements
line_Group = new Group();
final Rectangle canvas = new Rectangle(scene.getWidth() - 20, scene.getHeight() - 20);
...
// Build the canvas
canvas.setCursor(Cursor.CROSSHAIR);
canvas.setFill(Color.LIGHTGRAY);
canvas.setOnMousePressed(new EventHandler<MouseEvent>() {
@Override
public void handle(MouseEvent me) {
path = new Path();
path.setMouseTransparent(true);
path.setStrokeWidth(sampleLine.getStrokeWidth());
path.setStroke(sampleLine.getStroke());
line_Group.getChildren().add(path);
path.getElements().add(new MoveTo(me.getSceneX(), me.getSceneY()));
}
});
canvas.setOnMouseDragged(new EventHandler<MouseEvent>() {
@Override
public void handle(MouseEvent me) {
// keep lines within rectangle
if (canvas.getBoundsInLocal().contains(me.getX(), me.getY())) {
path.getElements().add(new LineTo(me.getSceneX(), me.getSceneY()));
}
}
});
// Build the VBox container for the toolBox, sampleline, and canvas
final Group board = new Group();
board.getChildren().addAll(canvas, line_Group);
ScrollPane scroll = createScrollPane(board);
VBox vb = new VBox(20);
vb.setPrefWidth(scene.getWidth() - 20);
vb.setLayoutY(20);
vb.setLayoutX(10);
vb.getChildren().addAll(toolBox, stackpane, scroll);
root.getChildren().addAll(vb);
primaryStage.setScene(scene);
primaryStage.show();
}
...
private ScrollPane createScrollPane(Group layout) {
ScrollPane scroll = new ScrollPane();
scroll.setHbarPolicy(ScrollPane.ScrollBarPolicy.NEVER);
scroll.setMaxHeight(400);
scroll.setContent(layout);
return scroll;
}
}
The problem is that the drawn path always appears in the same place, that is, if I move the scroll bar to draw further, it doesn't change anything.
I tried using ".getX ()" instead of ".getsceneX ()" in mouseEvent, but that didn't help either.
I am new to JavaFX so please bear with me
source to share
This is a simple application, but there are a few things that will change based on specific requirements, for example. what happens if the user drags outside the scroll area? Is the drawing area fixed, or is it at least the minimum size of the visible area ?, etc.
Here is a sample application that I came with. It won't suit your requirements in exactly the same way that I don't know exactly what it is, but hopefully it provides you with enough basic information to get you headed in the right direction again.
Click and drag the mouse to draw lines on the panel displayed inside the scroll. If you drag outside the area down or to the right, the minimum size of the drawing bar will update to match the new content of the row. Mouse Listeners onMousePressed
, onMouseDragged
, onMouseReleased
are used to start drawing processing operation, set the end point and the completion of the drawing operation.
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.ScrollPane;
import javafx.scene.layout.Pane;
import javafx.scene.shape.Line;
import javafx.stage.Stage;
public class LineDrawer extends Application {
public static void main(String[] args) {
launch(args);
}
private Line curLine;
@Override
public void start(Stage stage) throws Exception {
Pane drawingPane = new Pane();
drawingPane.setPrefSize(800, 800);
drawingPane.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
ScrollPane scrollPane = new ScrollPane(drawingPane);
scrollPane.setPrefSize(300, 300);
scrollPane.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
scrollPane.setFitToWidth(true);
scrollPane.setFitToHeight(true);
scrollPane.setStyle("-fx-focus-color: transparent;");
drawingPane.setOnMousePressed(event -> {
if (!event.isPrimaryButtonDown()) {
return;
}
curLine = new Line(
event.getX(), event.getY(),
event.getX(), event.getY()
);
drawingPane.getChildren().add(curLine);
});
drawingPane.setOnMouseDragged(event -> {
if (!event.isPrimaryButtonDown()) {
return;
}
if (curLine == null) {
return;
}
curLine.setEndX(event.getX());
curLine.setEndY(event.getY());
double mx = Math.max(curLine.getStartX(), curLine.getEndX());
double my = Math.max(curLine.getStartY(), curLine.getEndY());
if (mx > drawingPane.getMinWidth()) {
drawingPane.setMinWidth(mx);
}
if (my > drawingPane.getMinHeight()) {
drawingPane.setMinHeight(my);
}
});
drawingPane.setOnMouseReleased(event -> curLine = null);
Scene scene = new Scene(scrollPane);
stage.setMinWidth(100);
stage.setMinHeight(100);
stage.setScene(scene);
stage.show();
}
}
source to share