JavaFX - Shearing Transformation

A transformation that slants the shape of an object is called the Shear Transformation. There are two shear transformations X-Shear and Y-Shear. One shifts the X coordinate values and the other shifts the Y coordinate values. However, in both the cases only one coordinate changes its coordinates and the other preserves its values. Shearing is also termed as Skewing.

Example 1

Following is the program which demonstrates shearing in JavaFX. Here, we are creating 2 polygons (nodes) at the same location, with the same dimensions, but with different colors (Blue and Transparent). We are also applying shearing on the transparent polygon.

Save this code in a file with the name XShearingExample.java.

import javafx.application.Application; 
import javafx.scene.Group; 
import javafx.scene.Scene; 
import javafx.scene.paint.Color; 
import javafx.scene.shape.Polygon; 
import javafx.scene.transform.Shear; 
import javafx.stage.Stage; 
         
public class XShearingExample extends Application { 
   @Override 
   public void start(Stage stage) {      
      Polygon hexagon1 = new Polygon();        
      
      //Adding coordinates to the hexagon 
      hexagon1.getPoints().addAll(new Double[]{         
         200.0, 50.0,
         400.0, 50.0, 
         450.0, 150.0,          
         400.0, 250.0, 
         200.0, 250.0,                   
         150.0, 150.0, 
      }); 
      //Setting the fill color for the hexagon 
      hexagon1.setFill(Color.BLUE); 
      
      hexagon1.setStroke(Color.BLACK); 
      Polygon hexagon2 = new Polygon();        
      
      //Adding coordinates to the hexagon 
      hexagon2.getPoints().addAll(new Double[]{        
         200.0, 50.0, 
         400.0, 50.0, 
         450.0, 150.0,          
         400.0, 250.0, 
         200.0, 250.0,                   
         150.0, 150.0, 
      }); 
      //Setting the fill color for the hexagon 
      hexagon2.setFill(Color.TRANSPARENT); 
      hexagon2.setStroke(Color.BLACK); 
       
      //Creating shear transformation 
      Shear shear = new Shear(); 
      
      //Setting the pivot points 
      shear.setPivotX(200); 
      shear.setPivotY(250); 
      
      //Setting the dimensions for the shear 
      shear.setX(0.5); 
      shear.setY(0.0); 
       
      //Adding the transformation to the polygon  
      hexagon2.getTransforms().addAll(shear); 
      
      //Creating a Group object  
      Group root = new Group(hexagon1, hexagon2); 
         
      //Creating a scene object 
      Scene scene = new Scene(root, 600, 300);  
      
      //Setting title to the Stage 
      stage.setTitle("Shearing Example "); 
         
      //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 XShearingExample.java 
java --module-path %PATH_TO_FX% --add-modules javafx.controls XShearingExample

Output

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

Example 2

In the previous example, we have seen how to perform X-Shear by skewing the hexagon with respect to the X-axis. In this example, let us see Y-Shear performed on another JavaFX 2D shape, say pentagon.

Save this code in a file with the name YShearingExample.java.

import javafx.application.Application; 
import javafx.scene.Group; 
import javafx.scene.Scene; 
import javafx.scene.paint.Color; 
import javafx.scene.shape.Polygon; 
import javafx.scene.transform.Shear; 
import javafx.stage.Stage; 
         
public class YShearingExample extends Application { 
   @Override 
   public void start(Stage stage) {      
      Polygon pentagon1 = new Polygon();        
      
      //Adding coordinates to the pentagon 
      pentagon1.getPoints().addAll(new Double[]{         
         200.0, 50.0,
         400.0, 50.0, 
         450.0, 150.0,          
         400.0, 250.0, 
         200.0, 250.0,                    
      }); 
      //Setting the fill color for the pentagon 
      pentagon1.setFill(Color.ORANGE); 
      
      pentagon1.setStroke(Color.BLACK); 
      Polygon pentagon2 = new Polygon();        
      
      //Adding coordinates to the pentagon 
      pentagon2.getPoints().addAll(new Double[]{        
         200.0, 50.0, 
         400.0, 50.0, 
         450.0, 150.0,          
         400.0, 250.0, 
         200.0, 250.0,                    
      }); 
      //Setting the fill color for the pentagon 
      pentagon2.setFill(Color.TRANSPARENT); 
      pentagon2.setStroke(Color.BLACK); 
       
      //Creating shear transformation 
      Shear shear = new Shear(); 
      
      //Setting the pivot points 
      shear.setPivotX(200); 
      shear.setPivotY(250); 
      
      //Setting the dimensions for the shear 
      shear.setX(0.0); 
      shear.setY(0.5); 
       
      //Adding the transformation to the polygon  
      pentagon2.getTransforms().addAll(shear); 
      
      //Creating a Group object  
      Group root = new Group(pentagon1, pentagon2); 
         
      //Creating a scene object 
      Scene scene = new Scene(root, 600, 400);  
      
      //Setting title to the Stage 
      stage.setTitle("Shearing Example "); 
         
      //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 YShearingExample.java 
java --module-path %PATH_TO_FX% --add-modules javafx.controls YShearingExample

Output

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