JAVAFX ZOOMFX

JAVAFX  ZOOMFX

This simple tutorial will demonstrate the use of scale and viewport to produce a zoom like effect over an image.

Source Code

   int width=100;

   int height=70;

   AnchorPane root;

   ImageView image;

   StackPane scaledImage;

   Rectangle2D viewPort;

   int scale =2;

  

    @Override

    public void start(Stage primaryStage) {

        image=new ImageView("file:z.png");

        //to impove performance

        image.setCache(true);

        ImageView  image_background=new ImageView("file:z.png");

        image_background.setCache(true);

        root=new AnchorPane();

        //displays the scaled image

        scaledImage =new StackPane();

        //an image part specified by coordinates ,width and height

        viewPort=new Rectangle2D(0,0,width,height);

        image.setViewport(viewPort);

        //add the scaled image to imageScale pane

        scaledImage.getChildren().add(image);

        scaledImage.setOnMouseDragged(new EventHandler<MouseEvent>(){

            @Override

            public void handle(MouseEvent event) {

            scaledImage.setLayoutX(event.getSceneX()-width/2);// center the mouse

           scaledImage.setLayoutY(event.getSceneY()-height/2);//center the mouse

        viewPort = new Rectangle2D(event.getSceneX()-width/2, event.getSceneY()-height/2, width, height);

                image.setViewport(viewPort);

                image.setScaleX(scale);

                image.setScaleY(scale);

                image.setCache(true);

                image.setPreserveRatio(true);

            }

        });

        root.getChildren().addAll(image_background, scaledImage);

        Scene scene = new Scene(root,Color.AQUAMARINE);

        primaryStage.setTitle("ZoomFX");

        primaryStage.setScene(scene);

        primaryStage.show();

}

 Results

 VIDEO DEMO