Tuesday, July 16, 2013

JavaFX: Drag and Move something

The example demonstrate how to implement EventHandler for OnMousePressed and OnMouseDragged evenets, to detect mouse drag and move something.

Drag and Move something
Drag and Move something


package javafx_drawsomething;

import javafx.application.Application;
import javafx.event.EventHandler;
import javafx.scene.Cursor;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.input.MouseEvent;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;

/**
 * @web http://java-buddy.blogspot.com/
 */
public class JavaFX_DrawSomething extends Application {
    
    Circle circle_Red, circle_Green, circle_Blue;
    double orgSceneX, orgSceneY;
    double orgTranslateX, orgTranslateY;
    
    @Override
    public void start(Stage primaryStage) {
        
        //Create Circles
        circle_Red = new Circle(50.0f, Color.RED);
        circle_Red.setCursor(Cursor.HAND);
        circle_Red.setOnMousePressed(circleOnMousePressedEventHandler);
        circle_Red.setOnMouseDragged(circleOnMouseDraggedEventHandler);
        
        circle_Green = new Circle(50.0f, Color.GREEN);
        circle_Green.setCursor(Cursor.MOVE);
        circle_Green.setCenterX(150);
        circle_Green.setCenterY(150);
        circle_Green.setOnMousePressed(circleOnMousePressedEventHandler);
        circle_Green.setOnMouseDragged(circleOnMouseDraggedEventHandler);
        
        circle_Blue = new Circle(50.0f, Color.BLUE);
        circle_Blue.setCursor(Cursor.CROSSHAIR);
        circle_Blue.setTranslateX(300);
        circle_Blue.setTranslateY(100);
        circle_Blue.setOnMousePressed(circleOnMousePressedEventHandler);
        circle_Blue.setOnMouseDragged(circleOnMouseDraggedEventHandler);
                
        Group root = new Group();
        root.getChildren().addAll(circle_Red, circle_Green, circle_Blue);
        
        primaryStage.setResizable(false);
        primaryStage.setScene(new Scene(root, 400,350));
        
        primaryStage.setTitle("java-buddy");
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
    
    EventHandler<MouseEvent> circleOnMousePressedEventHandler = 
        new EventHandler<MouseEvent>() {

        @Override
        public void handle(MouseEvent t) {
            orgSceneX = t.getSceneX();
            orgSceneY = t.getSceneY();
            orgTranslateX = ((Circle)(t.getSource())).getTranslateX();
            orgTranslateY = ((Circle)(t.getSource())).getTranslateY();
        }
    };
    
    EventHandler<MouseEvent> circleOnMouseDraggedEventHandler = 
        new EventHandler<MouseEvent>() {

        @Override
        public void handle(MouseEvent t) {
            double offsetX = t.getSceneX() - orgSceneX;
            double offsetY = t.getSceneY() - orgSceneY;
            double newTranslateX = orgTranslateX + offsetX;
            double newTranslateY = orgTranslateY + offsetY;
            
            ((Circle)(t.getSource())).setTranslateX(newTranslateX);
            ((Circle)(t.getSource())).setTranslateY(newTranslateY);
        }
    };
}




7 comments:

  1. I am a javafx novice and your articles have been a good resource for me.I generated vertices of regular polygon etc .I used the above concept to drag the shapes on javaFx(canvas).The dragging is occurring on the convas itself instead of the figures.I substituted the Circle object withe the Convas. I will appreciate your ideia

    ReplyDelete
  2. Hi, is there a way to limit the dragging within one pane if i have multiple panes?

    ReplyDelete
  3. How can i produce a momentum while dragging?

    ReplyDelete
  4. how about 2 object? Just in case, i have imageview that have border, which is the border is rectangle object. That code only move imageview but the border is still. I'v try to bound the border with the imageview since the firstime, but still imageview that moved.

    ReplyDelete
  5. How would you do this with a Image?

    ReplyDelete
  6. This was really useful, all of the other ways had laggy dragging movement, thank you !

    ReplyDelete