JavaFX - 2D 形状 - 菜鸟教程

简述

在上一章中，我们已经看到了JavaFX的基本应用，在那里我们学习了如何创建一个空窗口以及如何在JavaFX的XY平面上画一条线。除了线条，我们还可以绘制其他几个二维形状。

二维形状

通常，2D 形状是可以在 XY 平面上绘制的几何图形，包括直线、矩形、圆形等。

使用 JavaFX 库，您可以绘制 -

预定义的形状，例如直线、矩形、圆形、椭圆、多边形、折线、三次曲线、四边形曲线、圆弧。
路径元素，如 MoveTO 路径元素、直线、水平线、垂直线、三次曲线、二次曲线、圆弧。
除了这些，你还可以通过解析SVG路径来绘制2D形状。

上面提到的每个 2D 形状都由一个类表示，所有这些类都属于包 javafx.scene.shape. 类名为Shape 是 JavaFX 中所有二维形状的基类。

创建 2D 形状

要创建图表，您需要 -

实例化所需形状的相应类。
设置形状的属性。
将形状对象添加到组中。

实例化相应的类

要创建 2 维形状，首先需要实例化其各自的类。

例如，如果你想创建一条线，你需要实例化名为 Line 的类，如下所示 -


Line line = new Line();

设置形状的属性

实例化该类后，您需要使用 setter 方法设置形状的属性。

例如，要绘制一条直线，您需要传递直线起点和终点的 x 和 y 坐标。您可以使用它们各自的 setter 方法指定这些值，如下所示 -


//Setting the Properties of the Line 
line.setStartX(150.0f); 
line.setStartY(140.0f);         
line.setEndX(450.0f); 
line.setEndY(140.0f);

将形状对象添加到组

最后，您需要通过将形状对象作为构造函数的参数传递来将其添加到组中，如下所示。


//Creating a Group object  
Group root = new Group(line);

下表列出了 JavaFX 提供的各种形状（类）。

序号	形状和描述
1	Line 线是连接两点的几何结构。这Line 包的类别 javafx.scene.shape 表示 XY 平面中的一条线。
2	Rectangle 一般来说，矩形是一个四边多边形，它有两对平行且平行的边，所有的内角都是直角。在 JavaFX 中，一个 Rectangle 由一个名为的类表示Rectangle. 这个类属于包javafx.scene.shape.
3	Rounded Rectangle 在 JavaFX 中，您可以绘制带有锐边或弧形边缘的矩形，带有弧形边缘的矩形称为圆角矩形。
4	Circle 圆是形成闭环的线，其上的每个点与中心点的距离是固定的。在 JavaFX 中，圆由名为的类表示Circle. 这个类属于包javafx.scene.shape.
5	Ellipse 椭圆由两个点定义，每个点称为一个焦点。如果取椭圆上的任何一点，则到焦点的距离之和是恒定的。椭圆的大小由这两个距离的总和决定。在 JavaFX 中，椭圆由名为的类表示 Ellipse. 这个类属于包javafx.scene.shape.
6	Polygon 由多个首尾相连的共面线段形成的封闭形状。在 JavaFX 中，多边形由名为的类表示Polygon. 这个类属于包javafx.scene.shape.
7	Polyline 折线与多边形相同，只是折线最终没有闭合。或者，由一个或多个线段组成的连续线。在 JavaFX 中，折线由名为的类表示Polygon. 这个类属于包javafx.scene.shape.
8	Cubic Curve 三次曲线是 XY 平面中的贝塞尔参数曲线，是 3 次曲线。在 JavaFX 中，三次曲线由名为的类表示 CubicCurve. 这个类属于包javafx.scene.shape.
9	QuadCurve 二次曲线是 XY 平面中的贝塞尔参数曲线，是 2 次曲线。在 JavaFX 中，QuadCurve 由名为 QuadCurve 的类表示。这个类属于包javafx.scene.shape.
10	Arc 圆弧是曲线的一部分。在 JavaFX 中，弧由名为的类表示Arc. 这个类属于包 -javafx.scene.shape. Types Of Arc 除此之外，我们还可以绘制三种类型的弧 Open, Chord, Round.
11	SVGPath 在 JavaFX 中，我们可以通过解析 SVG 路径来构造图像。这些形状由名为的类表示SVGPath. 这个类属于包javafx.scene.shape. 这个类有一个名为content字符串数据类型。这表示 SVG 路径编码的字符串，应该从中绘制图像。

通过路径类绘制更多形状

在上一节中，我们已经看到了如何通过实例化类和设置相应的参数来绘制一些简单的预定义形状。

但是，仅这些预定义的形状不足以构建除由 javafx.shape package.

例如，如果要绘制如下图所示的图形元素，则不能依赖于那些简单的形状。

路径类

为了绘制如此复杂的结构，JavaFX 提供了一个名为 Path. 此类表示形状的几何轮廓。

它附加到一个 observable 列表中，该列表包含各种 Path Elements 例如 moveTo、LineTo、HlineTo、VlineTo、ArcTo、QuadCurveTo、CubicCurveTo。

在实例化时，此类根据给定的路径元素构造一个路径。

您可以在实例化它的同时将路径元素传递给此类，如下所示 -


Path myshape = new Path(pathElement1, pathElement2, pathElement3);

或者，您可以获取可观察列表并使用添加所有路径元素 addAll() 方法如下 -


Path myshape = new Path(); 
myshape.getElements().addAll(pathElement1, pathElement2, pathElement3);

您还可以使用 add() 方法单独添加元素 -


Path myshape = new Path(); 
myshape.getElements().add(pathElement1);

移动到路径元素

路径元素 MoveTo用于将路径的当前位置移动到指定点。它通常用于设置使用路径元素绘制的形状的起点。

它由一个名为的类表示 LineTo 包裹的 javafx.scene.shape. 它具有双数据类型的 2 个属性，即 -

X − 从当前位置绘制直线的点的 x 坐标。
Y − 从当前位置绘制直线的点的 y 坐标。

您可以通过实例化 MoveTo 类并传递新点的 x、y 坐标来创建移动到路径元素，如下所示 -


MoveTo moveTo = new MoveTo(x, y);

如果您不向构造函数传递任何值，则新点将设置为 (0,0)。

您还可以使用它们各自的 setter 方法将值设置为 x、y 坐标，如下所示 -


setX(value); 
setY(value);

示例 – 绘制复杂路径

在本例中，我们将展示如何使用 Path, MoveTo 和 Line 类。

将此代码保存在名称为的文件中 ComplexShape.java.


import javafx.application.Application; 
import javafx.scene.Group; 
import javafx.scene.Scene; 
import javafx.stage.Stage; 
import javafx.scene.shape.LineTo; 
import javafx.scene.shape.MoveTo; 
import javafx.scene.shape.Path; 
         
public class ComplexShape extends Application { 
   @Override 
   public void start(Stage stage) { 
      //Creating a Path 
      Path path = new Path(); 
       
      //Moving to the starting point 
      MoveTo moveTo = new MoveTo(108, 71); 
        
      //Creating 1st line 
      LineTo line1 = new LineTo(321, 161);  
       
      //Creating 2nd line 
      LineTo line2 = new LineTo(126,232);       
       
      //Creating 3rd line 
      LineTo line3 = new LineTo(232,52);  
       
      //Creating 4th line 
      LineTo line4 = new LineTo(269, 250);   
       
      //Creating 4th line 
      LineTo line5 = new LineTo(108, 71);  
       
      //Adding all the elements to the path 
      path.getElements().add(moveTo); 
      path.getElements().addAll(line1, line2, line3, line4, line5);        
         
      //Creating a Group object  
      Group root = new Group(path); 
         
      //Creating a scene object 
      Scene scene = new Scene(root, 600, 300);  
      
      //Setting title to the Stage 
      stage.setTitle("Drawing an arc through a path");
      
      //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 文件。


javac ComplexShape.java 
java ComplexShape

执行时，上面的程序会生成一个 JavaFX 窗口，显示一个圆弧，该圆弧从当前位置绘制到指定点，如下所示。

以下是 JavaFX 提供的各种路径元素（类）。这些类存在于包中javafx.shape. 所有这些类都继承了这个类PathElement.

序号	形状和描述
1	LineTo 路径元素 line用于从当前位置绘制一条直线到指定坐标中的点。它由一个名为的类表示LineTo. 这个类属于包javafx.scene.shape.
2	HlineTo 路径元素 HLineTo用于从当前位置绘制一条水平线到指定坐标中的一个点。它由一个名为的类表示HLineTo. 这个类属于包javafx.scene.shape.
3	VLineTo 路径元素 vertical line用于从当前位置绘制一条垂直线到指定坐标中的一个点。它由一个名为的类表示VLineTo. 这个类属于包javafx.scene.shape.
4	QuadCurveTo 路径元素二次曲线用于绘制一个 quadratic curve从当前位置到指定坐标中的点。它由一个名为的类表示QuadraticCurveTo. 这个类属于包javafx.scene.shape.
5	CubicCurveTo 路径元素 cubic curve用于绘制从当前位置到指定坐标中的点的三次曲线。它由一个名为的类表示CubicCurveTo. 这个类属于包javafx.scene.shape.
6	ArcTo 路径元素 Arc用于从当前位置绘制到指定坐标中的点的圆弧。它由一个名为的类表示ArcTo. 这个类属于包javafx.scene.shape.

二维对象的属性

对于所有二维对象，您可以设置各种属性，如填充、描边、描边类型等。以下部分讨论二维对象的各种属性。

对 2D 对象的操作

如果我们将多个形状添加到组中，第一个形状将与第二个形状重叠，如下所示。

除了变换（旋转、缩放、平移等）、过渡（动画），您还可以对 2D 对象执行三种操作，即 - Union, Subtraction 和 Intersection.

序号	操作和说明
1	Union Operation 此操作将两个或多个形状作为输入，并返回它们所占的面积。
2	Intersection Operation 此操作将两个或多个形状作为输入并返回它们之间的交叉区域。
3	Subtraction Operation 此操作将两个或多个形状作为输入。然后，它返回第一个形状的区域，不包括与第二个形状重叠的区域。