JavaFX 2D Shapes（形状） | 来唧唧歪歪(Ljjyy.com) - 多读书多实践，勤思考善领悟

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

2D形状

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

使用JavaFX库，您可以绘制 -

预定义的形状，如直线，矩形，圆，椭圆，多边形，折线，立方曲线，四边形曲线，圆弧。
路径元素，如MoveTO路径元素，线，水平线，垂直线，立方曲线，二次曲线，弧。
除此之外，您还可以通过解析SVG路径来绘制2D形状。

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

创建2D形状

要创建图表，您需要 -

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

实例化各个类

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

例如，如果要创建一行，则需要实例化名为Line的类，如下所示 -

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

将形状对象添加到组

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

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

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

序号	形状和描述
1	Line(线)线是连接两点的几何结构。包javafx.scene.shape的Line类表示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中，Polyline由名为Polygon的类表示。该类属于包javafx.scene.shape。
8	Cubic Curve(立方曲线)三次曲线是XY平面中的贝塞尔参数曲线，是度数为3的曲线。在JavaFX中，立方曲线由名为CubicCurve的类表示。该类属于包javafx.scene.shape。
9	QuadCurve(四次曲线)二次曲线是XY平面中的Bezier参数曲线，是2阶曲线。在JavaFX中，QuadCurve由名为QuadCurve的类表示。该类属于包javafx.scene.shape。
10	Arc(弧)弧是曲线的一部分。在JavaFX中，弧由名为Arc的类表示。该类属于包 - javafx.scene.shape。弧的类型除此之外，我们还可以绘制三种弧形的Open，Chord，Round。
11	SVGPath在JavaFX中，我们可以通过解析SVG路径来构造图像。这种形状由名为SVGPath的类表示。该类属于包javafx.scene.shape。此类具有名为String数据类型的内容的属性。这表示SVG Path编码的字符串，应从中绘制图像。

通过路径类绘制更多形状

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

但是，只有这些预定义的形状不足以构建除javafx.shape包提供的基元之外的更复杂的形状。

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

路径类

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

它附加到一个可观察的列表，其中包含各种路径元素，如moveTo，LineTo，HlineTo，VlineTo，ArcTo，QuadCurveTo，CubicCurveTo。

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

您可以将路径元素传递给此类，同时将其实例化为如下 -

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

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

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

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

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

移动到路径元素

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

它由包javafx.scene.shape的名为LineTo的类表示。它有两个数据类型的属性，即 -

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

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

1	MoveTo moveTo = new MoveTo(x, y);

如果未将任何值传递给构造函数，则新点将设置为（0,0）。

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

1 2	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文件。

1 2	javac ComplexShape.java java ComplexShape

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

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

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

2D对象的属性

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

2D对象的操作

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

除了转换（旋转，缩放，平移等），转换（动画）之外，您还可以对2D对象执行三个操作，即Union，Subtraction和Intersection。

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