Javafx 简明教程

JavaFX - Shearing Transformation

一种使一个对象形状倾斜的变换被称作剪切变换。它有两种， X-Shear 和 Y-Shear 。一种使 X 坐标值偏移，另一种使 Y 坐标值偏移。但是，在这两种情况下，都仅有一个坐标改变了它的值，而另外一个坐标保持了它的值。剪切也被称为 Skewing 。

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.

shearing

Example 1

下面是演示在 JavaFX 中剪切的代码。在这里，我们在相同的位置创建两个多边形（节点），它们具有相同的大小，但颜色不同（蓝色和透明）。我们在透明多边形上应用剪切。

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.

将这个代码保存在名为 XShearingExample.java 的文件中。

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);
   }
}

使用以下命令，从命令提示符编译并执行已保存的 java 文件。

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

执行后，上述程序会生成如下所示的 JavaFX 窗口。

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

shearing example

Example 2

在前面的例子中，我们已经看到了如何执行 X 剪切，它相对于 X 轴倾斜六边形。在这个例子中，我们将会看到在另一个 JavaFX 2D 形状上执行 Y 剪切，例如五边形。

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.

将这个代码保存在名为 YShearingExample.java 的文件中。

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);
   }
}

使用以下命令，从命令提示符编译并执行已保存的 java 文件。

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

执行后，上述程序会生成如下所示的 JavaFX 窗口。

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

yshearing example