I am working on making a screen recorder in JavaFX and one utility that is mandatory in the screen recorder is to let the user define how much area to record.
I managed to make an undecorated , semi-transparent Stage
that can be dragged around to define the area and added a close
button to let the user confirm the area which is to be recorded.
Now, how do I let the user resize the stage by dragging it by its edges ?
SSCCE:
package draggable;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Pos;
import javafx.geometry.Rectangle2D;
import javafx.scene.Scene;
import javafx.scene.SceneBuilder;
import javafx.scene.control.Button;
import javafx.scene.control.ButtonBuilder;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.StackPaneBuilder;
import javafx.scene.paint.Color;
import javafx.stage.Screen;
import javafx.stage.Stage;
import javafx.stage.StageStyle;
public class DraggableStage extends Application{
Button close;
StackPane holder;
Rectangle2D maxBounds;
Scene theScene;
double pressedX;
double pressedY;
double draggedX;
double draggedY;
@Override
public void start(Stage stage) throws Exception {
final Stage theStage = stage;
// determine how big the screen is
maxBounds = Screen.getPrimary().getVisualBounds();
//create the close button
close = ButtonBuilder
.create()
.text("Close")
.build();
//create the StackPane holder for the button
holder = StackPaneBuilder
.create()
.alignment(Pos.CENTER)
.children(close)
.build();
// you cannot resize the screen beyond the max resolution of the screen
holder.setMaxSize(maxBounds.getWidth(), maxBounds.getHeight());
//you cannot resize under half the width and height of the screen
holder.setMinSize(maxBounds.getWidth() / 2,maxBounds.getHeight() / 2);
//the scene where it all happens
theScene = SceneBuilder
.create()
.root(holder)
.width(maxBounds.getWidth() / 2)
.height(maxBounds.getHeight() / 2)
.build();
// add the button listeners
close.setOnAction(new EventHandler<ActionEvent>(){
@Override
public void handle(ActionEvent event) {
theStage.close();
}
});
// add the drag and press listener for the StackPane
holder.setOnMousePressed(new EventHandler<MouseEvent>(){
@Override
public void handle(MouseEvent e) {
pressedX = e.getX();
pressedY = e.getY();
}
});
holder.setOnMouseDragged(new EventHandler<MouseEvent>(){
@Override
public void handle(MouseEvent e) {
draggedX = e.getX();
draggedY = e.getY();
double differenceX = draggedX - pressedX;
double differenceY = draggedY - pressedY;
theStage.setX(theStage.getX() + differenceX);
theStage.setY(theStage.getY() + differenceY);
}
});
//the mandatory mumbo jumbo
theScene.setFill(Color.rgb(128, 128, 128, 0.5));
stage.initStyle(StageStyle.TRANSPARENT);
stage.setScene(theScene);
stage.sizeToScene();
stage.show();
}
public static void main(String[] args) {
Application.launch("draggable.DraggableStage");
}
}
Image:
Here is an updated version of ResizeHelper posted by @Alexander.Berg, which supports window drag:
}
Kotlin Version
Inspired by the many answers here, I wrote my own implementation that has all the necessary features that I could think of:
Features
Draggability
Fullscreen
Resizeable
Usage
Quick setup:
Custom interaction areas:
Code
Thanks @Alexander.Berg for providing this utility class (1st version). It helped me to get the desired functionality for my Undecorated Stage.
However, I have few queries regarding some points:
I tried to modify your code to address all the above queries. Please find below the updated ResizeHelper. I am only trying to simplify the things a bit further. Once again thanks for providing the code and letting me to think with a starting point.
What can I say... I'm a slow learner. Took me a bit to really go through all the code and understand it. Its not hard... just a lot going on. I decided to make some changes to use absolute mouse position as opposed to relative mouse position, I also changed the class overall from using static members and whatnot. Here's what I came up with and works quite well for myself. For those searching for similar solutions, enjoy my copious comments... Using this version of this class is as simple as:
ResizeListener listener = new ResizeListener(stage);
I created a ResizeHelper class which can help you in that case, usage:
the helper class:
I've looked into some threads where they discuss about it before I tried myself to "solve" it, but in the end there was no Problem.
I created a button in the bottom-right corner, gave the Button an OnDraggedMethod and simply used the mouseevent and set the Height/Width on MousePosition - stage X/Y position.
Also I set a minimal Width and Height. And because i think that the laggy resize-animation is annoying i surrounded the statement with the if and just resize the stage every 5th pixel.
Looks much better!
PS: The +13 and +10 is just for the MousePosition. Otherweise the Mouse is on the Corner not on the Button^^.