JavaFX - 2D 形状
在上一章中,我们了解了 JavaFX 的基本应用,学习了如何创建一个空窗口以及如何在 JavaFX 的 XY 平面上画一条线。除了线,我们还可以绘制其他几种 2D 形状。
2D 形状
一般来说,2D 形状是可以在 XY 平面上绘制的几何图形,包括线、矩形、圆等。
使用 JavaFX 库,您可以绘制 −
预定义形状,如线、矩形、圆、椭圆、多边形、折线、三次曲线、四次曲线、圆弧。
路径元素,如 MoveTO 路径元素、线、水平线、垂直线、三次曲线、二次曲线、圆弧。
除了这些,您还可以通过解析 SVG 路径来绘制 2D 形状。
上述每种 2D 形状都由一个类表示,所有这些类属于包 javafx.scene.shape。名为 Shape 的类是 JavaFX 中所有 2 维形状的基类。
创建 2D 形状
要创建图表,您需要 −
- 实例化所需形状的相应类。
- 设置形状的属性。
- 将形状对象添加到组中。
实例化相应类
要创建 2 维形状,首先您需要实例化其相应类。
例如,如果您想创建一条线,您需要按如下方式实例化名为 Line 的类 −
Line line = new Line();
设置形状的属性
实例化类后,您需要使用 setter 方法设置形状的属性。
例如,要绘制一条线,您需要传递线的起点和终点的 x 和 y 坐标。您可以使用它们各自的 setter 方法指定这些值,如下所示 −
//设置线的属性 line.setStartX(150.0f); line.setStartY(140.0f); line.setEndX(450.0f); line.setEndY(140.0f);
将形状对象添加到组中
最后,您需要将形状对象作为构造函数的参数传递,将其添加到组中,如下所示。
//创建组对象 Group root = new Group(line);
下表列出了 JavaFX 提供的各种形状(类)。
S.No | 形状和描述 |
---|---|
1 |
线
线是连接两点的几何结构。javafx.scene.shape 包中的 Line 类表示 XY 平面中的一条线。 |
2 |
矩形
一般来说,矩形是一个四边形,具有两对平行且共点的边,所有内角均为直角。在 JavaFX 中,矩形由名为 Rectangle 的类表示。此类属于包 javafx.scene.shape。 |
3 |
圆角矩形
在 JavaFX 中,您可以绘制具有尖角或拱形边缘的矩形,具有拱形边缘的矩形称为圆角矩形。 |
4 |
圆
圆是一条形成闭合环的线,其上的每个点与中心点的距离都是固定的。在 JavaFX 中,圆由名为 Circle 的类表示。此类属于 javafx.scene.shape 包。 |
5 |
椭圆
椭圆由两个点定义,每个点称为焦点。如果取椭圆上的任意一点,到焦点的距离总和是恒定的。椭圆的大小由这两个距离的总和决定。 在 JavaFX 中,椭圆由名为 Ellipse 的类表示。此类属于 javafx.scene.shape 包。 |
6 |
多边形
由多条首尾相连的共面线段形成的封闭形状。在 JavaFX 中,多边形由名为 Polygon 的类表示。此类属于 javafx.scene.shape 包。 |
7 |
折线
折线与多边形相同,只是折线末端不闭合。或者,由一个或多个线段组成的连续线。在 JavaFX 中,折线由名为 Polygon 的类表示。此类属于包 javafx.scene.shape。 |
8 |
三次曲线
三次曲线是 XY 平面上的贝塞尔参数曲线,是 3 度曲线。在 JavaFX 中,三次曲线由名为 CubicCurve 的类表示。此类属于包 javafx.scene.shape。 |
9 |
QuadCurve
二次曲线是 XY 平面上的贝塞尔参数曲线,是 2 度曲线。在 JavaFX 中,QuadCurve 由名为 QuadCurve 的类表示。此类属于包 javafx.scene.shape。 |
10 |
圆弧
圆弧是曲线的一部分。在 JavaFX 中,弧由名为 Arc 的类表示。此类属于包 − javafx.scene.shape。 弧的类型除此之外,我们还可以绘制三种类型的弧:开口、弦、圆。 |
11 |
SVGPath
在 JavaFX 中,我们可以通过解析 SVG 路径来构造图像。此类形状由名为 SVGPath 的类表示。此类属于包 javafx.scene.shape。此类具有一个名为 content 的属性,数据类型为 String。这表示 SVG Path 编码字符串,应从中绘制图像。 |
通过 Path 类绘制更多形状
在上一节中,我们已经了解了如何通过实例化类并设置相应的参数来绘制一些简单的预定义形状。
但是,除了 javafx.shape 包 提供的图元之外,仅靠这些预定义形状不足以构建更复杂的形状。
例如,如果您想绘制下图所示的图形元素,您不能依赖那些简单的形状。
![Path Class](/javafx/images/path_class.jpg)
Path 类
为了绘制这种复杂的结构,JavaFX 提供了一个名为 Path 的类。此类表示形状的几何轮廓。
它附加到可观察列表,该列表包含各种路径元素,例如 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 用于将路径的当前位置移动到指定点。它通常用于设置使用路径元素绘制的形状的起点。
它由包 javafx.scene.shape 中名为 LineTo 的类表示。它具有 2 个 double 数据类型的属性,即 −
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 类绘制以下形状。
![复杂路径](/javafx/images/complex_path.jpg)
将此代码保存在名为 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) { //创建路径 Path path = new Path(); //移动到起点 MoveTo moveTo = new MoveTo(108, 71); //创建第一条线 LineTo line1 = new LineTo(321, 161); //创建第二条线 LineTo line2 = new LineTo(126,232); //创建第三条线 LineTo line3 = new LineTo(232,52); //创建第四条线 LineTo line4 = new LineTo(269, 250); //创建第四条线 LineTo line5 = new LineTo(108, 71); //将所有元素添加到路径 path.getElements().add(moveTo); path.getElements().addAll(line1, line2, line3, line4, line5); //创建一个 Group 对象 Group root = new Group(path); //创建一个 scene 对象 Scene scene = new Scene(root, 600, 300); //设置 Stage 的标题 stage.setTitle("通过路径绘制弧线"); //将场景添加到舞台(Stage) stage.setScene(scene); //显示舞台(Stage)的内容 stage.show(); } public static void main(String args[]){ launch(args); } }
使用以下命令从命令提示符编译并执行保存的 java 文件。
javac ComplexShape.java java ComplexShape
执行时,上述程序会生成一个 JavaFX 窗口,其中显示一条圆弧,该圆弧从当前位置绘制到指定点,如下所示。
![通过路径绘制圆弧](/javafx/images/drawing_arc_through_path.jpg)
以下是 JavaFX 提供的各种路径元素(类)。这些类存在于包 javafx.shape 中。所有这些类都继承了类 PathElement。
S.No | Shape &描述 |
---|---|
1 |
LineTo
路径元素line用于从当前位置绘制一条直线到指定坐标中的点。它由名为LineTo的类表示。此类属于包javafx.scene.shape。 |
2 |
HlineTo
路径元素HLineTo用于从当前位置绘制一条水平线到指定坐标中的点。它由名为HLineTo的类表示。此类属于包 javafx.scene.shape。 |
3 |
VLineTo
路径元素 vertical line 用于从当前位置绘制到指定坐标中某个点的垂直线。它由名为 VLineTo 的类表示。此类属于包 javafx.scene.shape。 |
4 |
QuadCurveTo
路径元素二次曲线用于从当前位置向指定坐标中的点绘制二次曲线。它由名为QuadraticCurveTo的类表示。此类属于包 javafx.scene.shape。 |
5 |
CubicCurveTo
路径元素 cubic curve 用于从当前位置绘制到指定坐标中某个点的三次曲线。它由名为 CubicCurveTo 的类表示。此类属于包 javafx.scene.shape。 |
6 |
ArcTo
路径元素 Arc 用于从当前位置绘制到指定坐标点的圆弧。它由名为 ArcTo 的类表示。此类属于包 javafx.scene.shape。 |
2D 对象的属性
对于所有 2D 对象,您可以设置各种属性,如填充、描边、StrokeType 等。以下部分讨论了 2D 对象的各种属性。
2D 对象上的操作
如果我们将多个形状添加到一个组,则第一个形状将与第二个形状重叠,如下所示。
![2D 对象上的操作](/javafx/images/operations_on_2d_objects.jpg)
除了变换(旋转、缩放、平移等)、过渡(动画)之外,您还可以对 2D 对象执行三种操作,即 - 并集、减法和交集。
S.No | 操作 &描述 |
---|---|
1 |
联合操作
此操作将两个或多个形状作为输入,并返回它们所占的面积。 |
2 |
交集操作
此操作将两个或多个形状作为输入,并返回它们之间的交集面积。 |
3 |
减法操作
此操作将两个或多个形状作为输入,并返回它们之间的交集面积。 |