ViewPort method without zoom effect in JavaFX

Question

I'm trying to Slice an image to show on a screen. For example if I change the right margin to 20 of the flower picture on the left and the bottom margin of the flower picture in the right to 20 they should behave as follow:

(the original pictures are shown in the first column) enter image description here

ViewPort method does exactly what I want, cutting the image and leaving the margin empty but it uses image's original size displaying a zoom effect as it says in the javafx website:

"The rectangular viewport into the image. The viewport is specified in the coordinates of the image, prior to scaling or any other transformations. If viewport is null, the entire image is displayed. If viewport is non-null, only the portion of the image which falls within the viewport will be displayed. If the image does not fully cover the viewport then any remaining area of the viewport will be empty."

I already tried to use imageView.resize(screenWidth, screenHeight) before setting the viewport but it doesn't work.
Also tried to imageView.setFitWidth(screenWidth), imageView.setFitHeight(screenHeight)
Is it possible to rescale the image so it's displayed as described? Or any other work-around?

Here is my code for left margin as an example:
mediaContent.resize(screenWidth, screen.getHeight()); // mediaContent.setFitWidth(screenWidth); // mediaContent.setFitHeight(screen.getHeight()); mediaContent.setViewport(new Rectangle2D(screenWidth-dXLeft, 0, screenWidth, screen.getHeight()));

Update: Tried setting setFitWidth and setFitHeightas suggested stills displays the image zoomed in

    `imageView.setFitWidth(space.getX());
    imageView.setFitHeight(space.getY());
    imageView.setViewport(new Rectangle2D(screen.getWidth()-space.getX(), 0, screen.getWidth(), screen.getHeight()));
    imageView.setFitWidth(space.getX());
    imageView.setFitHeight(space.getY());

    return imageView;`

This is the result when I use the setViewport method when not setting margins: enter image description here

How it should be when not setting margins: enter image description here

Update 2: Example (modified from java-buddy) zooming in

package javafx_imageview_viewport;

import javafx.application.Application;
import javafx.beans.value.ObservableValue;
import javafx.geometry.Rectangle2D;
import javafx.scene.Scene;
import javafx.scene.control.Slider;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

/**
 * @web http://java-buddy.blogspot.com/
 */
public class JavaFX_ImageView_Viewport extends Application {

@Override
public void start(Stage primaryStage) {

    ImageView imageView1 = new ImageView(new Image("https://i.imgur.com/6Zl0eQB.jpg"));
    imageView1.setFitWidth(150);
    imageView1.setFitHeight(100);

    //Example to rotate ImageView
    Image image2 = new Image("https://i.imgur.com/6Zl0eQB.jpg");
    Rectangle2D viewportRect2 = new Rectangle2D(
            image2.getWidth()/4, 
            image2.getHeight()/4, 
            image2.getWidth()*3/4, 
            image2.getHeight()*3/4);
    ImageView imageView2 = new ImageView(image2);
    imageView2.setFitWidth(150);
    imageView2.setFitHeight(100);
    imageView2.setViewport(viewportRect2);

    Slider sliderRotate = new Slider();
    sliderRotate.setMin(0);
    sliderRotate.setMax(360);
    sliderRotate.setValue(0);
    sliderRotate.valueProperty().addListener(
            (ObservableValue observable, 
                    Number oldValue, Number newValue) -> {
        imageView2.setRotate((double)newValue);
    });

    //Example to change ViewPort
    Image image3 = new Image("https://i.imgur.com/6Zl0eQB.jpg");
    Rectangle2D viewportRect3 = new Rectangle2D(
            0, 
            0, 
            image3.getWidth(), 
            image3.getHeight());
    ImageView imageView3 = new ImageView(image3);
    imageView3.setFitWidth(150);
    imageView3.setFitHeight(100);
    imageView3.setViewport(viewportRect3);

    Slider sliderViewPort = new Slider();
    sliderViewPort.setMin(0);
    sliderViewPort.setMax(1.0);
    sliderViewPort.setValue(1.0);
    sliderViewPort.valueProperty().addListener(
            (ObservableValue observable, 
                    Number oldValue, Number newValue) -> {
        Rectangle2D newViewportRect3 = new Rectangle2D(
                0,
                0,
                (double)newValue*image3.getWidth(),
                (double)newValue*image3.getHeight());
        imageView3.setViewport(newViewportRect3);
    });


    VBox vBox = new VBox();
    vBox.getChildren().addAll(imageView1, 
            imageView2, sliderRotate,
            imageView3, sliderViewPort);

    StackPane root = new StackPane();
    root.getChildren().add(vBox);

    Scene scene = new Scene(root, 300, 350);

    primaryStage.setTitle("java-buddy: ImageVIew ViewPort");
    primaryStage.setScene(scene);
    primaryStage.show();
}

/**
 * @param args the command line arguments
 */
public static void main(String[] args) {
    launch(args);
}    
}

Example 2 from java-buddy how I want it to behave, cutting the image:

package javafx_imageview_viewport;

import javafx.application.Application;
import javafx.beans.value.ObservableValue;
import javafx.geometry.Rectangle2D;
import javafx.scene.Scene;
import javafx.scene.control.Slider;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

/**
 * @web http://java-buddy.blogspot.com/
 */
public class JavaFX_ImageView_Viewport extends Application {

@Override
public void start(Stage primaryStage) {

    ImageView imageView1 = new ImageView(new Image("https://i.imgur.com/294AEFU.png"));

    //Example to rotate ImageView
    Image image2 = new Image("https://i.imgur.com/294AEFU.png");
    Rectangle2D viewportRect2 = new Rectangle2D(
            image2.getWidth()/4, 
            image2.getHeight()/4, 
            image2.getWidth()*3/4, 
            image2.getHeight()*3/4);
    ImageView imageView2 = new ImageView(image2);
    imageView2.setViewport(viewportRect2);

    Slider sliderRotate = new Slider();
    sliderRotate.setMin(0);
    sliderRotate.setMax(360);
    sliderRotate.setValue(0);
    sliderRotate.valueProperty().addListener(
            (ObservableValue observable, 
                    Number oldValue, Number newValue) -> {
        imageView2.setRotate((double)newValue);
    });

    //Example to change ViewPort
    Image image3 = new Image("https://i.imgur.com/294AEFU.png");
    Rectangle2D viewportRect3 = new Rectangle2D(
            0, 
            0, 
            image3.getWidth(), 
            image3.getHeight());
    ImageView imageView3 = new ImageView(image3);
    imageView3.setViewport(viewportRect3);

    Slider sliderViewPort = new Slider();
    sliderViewPort.setMin(0);
    sliderViewPort.setMax(1.0);
    sliderViewPort.setValue(1.0);
    sliderViewPort.valueProperty().addListener(
            (ObservableValue observable, 
                    Number oldValue, Number newValue) -> {
        Rectangle2D newViewportRect3 = new Rectangle2D(
                0,
                0,
                (double)newValue*image3.getWidth(),
                (double)newValue*image3.getHeight());
        imageView3.setViewport(newViewportRect3);
    });


    VBox vBox = new VBox();
    vBox.getChildren().addAll(imageView1, 
            imageView2, sliderRotate,
            imageView3, sliderViewPort);

    StackPane root = new StackPane();
    root.getChildren().add(vBox);

    Scene scene = new Scene(root, 300, 350);

    primaryStage.setTitle("java-buddy: ImageVIew ViewPort");
    primaryStage.setScene(scene);
    primaryStage.show();
}

/**
 * @param args the command line arguments
 */
public static void main(String[] args) {
    launch(args);
}

}

Shell_Leko · Accepted Answer

It seems that what I wanted does not make sense.

If I want the image to fit the screen I have to use fitScreenWidth(screenWidth)and fitScreenHeight(screenHeight) but it does not make sense to use viewPort method in this case since the image has been resized already.

viewPort method should be used only with the original image's dimensions.

ViewPort method without zoom effect in JavaFX

Answers (1)

Related Questions