I want to use mouse scroll to make circle bigger (mouse-scroll-up) and circle smaller (mouse-scroll-down).
I have existing code to change circle radius smaller already with mouse middle button, but my question would be:
How can I use mouse-scroll-up and mouse-scroll-down to do the same thing?
I have googled, it could be done somehow with ScrollEvent, but I can’t understand this very well.
Answer
Answering to your question
How can I use mouse-scroll-up and mouse-scroll-down to do the same thing?
- Use a
ScrollListeneron the circle and use the ScrollEvent reference to get theDeltaY. - Create a
zoomfactorto calculate the zoom factor you want to have. - Apply this factor to the Scale property of your node.
Complete Example
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.input.ScrollEvent;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;
public class ZoomInOutCircles extends Application {
@Override
public void start(Stage primaryStage) {
Group root = new Group();
Scene scene = new Scene(root, 350, 300);
primaryStage.setTitle("Dots");
primaryStage.setScene(scene);
Circle circle = new Circle(175, 150, 10, Color.BLUE);
addMouseScrolling(circle);
root.getChildren().add(circle);
primaryStage.show();
}
public void addMouseScrolling(Node node) {
node.setOnScroll((ScrollEvent event) -> {
// Adjust the zoom factor as per your requirement
double zoomFactor = 1.05;
double deltaY = event.getDeltaY();
if (deltaY < 0){
zoomFactor = 2.0 - zoomFactor;
}
node.setScaleX(node.getScaleX() * zoomFactor);
node.setScaleY(node.getScaleY() * zoomFactor);
});
}
}