JavaFX - PerspectiveTransform



Usually, 2D objects are objects that can only be drawn on two-dimensional planes and are measured with two dimensions only. However, using the JavaFX application you can provide a 3D illusion of a 2D object. This effect is known as a Perspective Transform Effect.

The Perspective Transform effect will create a perspective in the direction of the Z-axis such that the object looks like it can be measured on the XYZ-plane while it actually is just measured on the XY-plane. This effect provides non-affine transformation where the straightness of lines in the source object is preserved in the output object. However, the parallelism is lost; unlike the affine transformation.

The affine transformation is a type of linear transformation, where the points, straight lines and parallelism is preserved from the source image to the output image.

You can apply this effect on a JavaFX node using the PerspectiveTransform class in the javafx.scene.effect package. This class has the following properties −

  • input − The input for this Effect.

  • llx − The x coordinate of the output location onto which the lower left corner of the source is mapped.

  • lly − The y coordinate of the output location onto which the lower left corner of the source is mapped.

  • lrx − The x coordinate of the output location onto which the lower right corner of the source is mapped.

  • lry − The y coordinate of the output location onto which the lower right corner of the source is mapped.

  • ulx − The x coordinate of the output location onto which the upper left corner of the source is mapped.

  • uly − The y coordinate of the output location onto which the upper left corner of the source is mapped.

  • urx − The x coordinate of the output location onto which the upper right corner of the source is mapped.

  • ury − The y coordinate of the output location onto which the upper right corner of the source is mapped.

Example

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.shape.Rectangle;
import javafx.scene.effect.Effect;
import javafx.scene.effect.PerspectiveTransform;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;
         
public class PerspectiveTransformExample extends Application { 
   @Override 
   public void start(Stage stage) {
      PerspectiveTransform prst = new PerspectiveTransform();
      prst.setUlx(10.0);
      prst.setUly(10.0);
      prst.setUrx(310.0);
      prst.setUry(40.0);
      prst.setLrx(310.0);
      prst.setLry(60.0);
      prst.setLlx(10.0);
      prst.setLly(90.0);

      Group g = new Group();
      g.setEffect(prst);
      g.setCache(true);

      Rectangle rect = new Rectangle();
      rect.setX(10.0);
      rect.setY(10.0);
      rect.setWidth(280.0);
      rect.setHeight(80.0);
      rect.setFill(Color.BLUE);

      Text text = new Text();
      text.setX(20.0);
      text.setY(65.0);
      text.setText("JavaFX App");
      text.setFill(Color.WHITE);
      text.setFont(Font.font(null, FontWeight.BOLD, 36));

      g.getChildren().addAll(rect, text);
	  
	  //Creating a Group object  
      Group root = new Group(g); 
               
      //Creating a scene object 
      Scene scene = new Scene(root, 600, 300);  
      
      //Setting title to the Stage 
      stage.setTitle("Perspective Transform Effect"); 
         
      //Adding scene to the stage 
      stage.setScene(scene); 
         
      //Displaying the contents of the stage 
      stage.show(); 
   }
   public static void main(String args[]){ 
      launch(args); 
   } 
}   

Compile and execute the saved java file from the command prompt using the following commands.

javac --module-path %PATH_TO_FX% --add-modules javafx.controls PerspectiveTransformExample.java 
java --module-path %PATH_TO_FX% --add-modules javafx.controls PerspectiveTransformExample     

Output

On executing, the above program generates a JavaFX window as shown below.

PerspectiveTransform_effect_example
Advertisements