JavaFX - 2D形状

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

2D形状

一般来说,2D形状是一个几何图形,可以在XY平面上绘制,包括Line,Rectangle,Circle等.

使用JavaFX库,可以绘制&减去;

  • 预定义的形状,如线条,矩形,圆形,椭圆形,多边形,折线,立方曲线,四边形曲线,弧形.

  • 路径元素,如MoveTO路径元素,直线,水平线,垂直线,立方曲线,二次曲线,弧.

  • In除此之外,您还可以通过解析SVG路径绘制2D形状.

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

创建2D形状

要创建图表,您需要&减去;

  • 实例化所需形状的相应类.

  • 设置形状的属性.

  • 将形状对象添加到组中.

实例化各个类

要创建一个二维形状,首先需要实例化其各自的类.

例如,如果你想要创建一个你需要实例化名为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);

将形状对象添加到组

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

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

下表给出了JavaFX提供的各种形状(类)的列表.

S.No形状与描述
1Line

线是连接两点的几何结构.包 javafx.scene.shape Line 类表示XY平面中的一条线.

2Rectangle

一般来说,矩形是一个四边形的多边形,有两对平行边和同时边,所有内角都是直角.在JavaFX中,Rectangle由名为 Rectangle 的类表示.此类属于包 javafx.scene.shape .

3Rounded Rectangle

在JavaFX中,您可以绘制一个带有锐边或带有拱形边的矩形.带有拱形边的矩形称为圆角矩形.

4Circle

圆圈是一条形成闭环的线,每个点与中心点之间的距离是固定的.在JavaFX中,圆圈由名为 Circle 的类表示.此类属于包 javafx.scene.shape .

5Ellipse

椭圆由两个点定义,每个点称为焦点.如果采用椭圆上的任何点,则到焦点的距离之和是恒定的.椭圆的大小由这两个距离的总和决定.

在JavaFX中,椭圆由名为 Ellipse 的类表示.此类属于包 javafx.scene.shape .

6Polygon

由多个共面线段首尾相连形成的封闭形状.在JavaFX中,多边形由名为 Polygon 的类表示.此类属于包 javafx.scene.shape .

7Polyline

折线与多边形相同,只是折线最终没有关闭.或者,由一个或多个线段组成的连续线.在JavaFX中,Polyline由名为 Polygon 的类表示.此类属于包 javafx.scene.shape .

8Cubic Curve

三次曲线是XY平面中的Bezier参数曲线,是度为3的曲线.在JavaFX中,立方曲线由名为 CubicCurve 的类表示.此类属于包 javafx.scene.shape .

9QuadCurve

二次曲线是XY平面中的Bezier参数曲线,是2阶曲线.在JavaFX中,QuadCurve由名为QuadCurve的类表示.此类属于包 javafx.scene.shape .

10Arc

弧是曲线的一部分.在JavaFX中,弧由名为 Arc 的类表示.这个类属于包 :   javafx.scene.shape .

Arc of Types

除此之外,我们还可以绘制三种类型的弧开放,和弦,圆形.

11SVGPath

在JavaFX中,我们可以通过解析SVG路径来构建图像.这些形状由名为 SVGPath 的类表示.此类属于包 javafx.scene.shape .此类具有String数据类型的名为 content 的属性.这表示SVG路径编码的字符串,应从中绘制图像..

通过路径类绘制更多形状

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

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

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

路径类

路径类

为了绘制这样复杂的结构,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 用于移动到指定点的路径的当前位置.它通常用于设置使用路径元素绘制的形状的起点.

它由包的名为 LineTo 的类表示javafx.scene.shape 的.它有2个double数据类型的属性,即 :

  • X : 从当前位置绘制线的点的x坐标.

  • Y : 从当前位置绘制直线的点的y坐标.

您可以创建移动到路径元素通过实例化MoveTo类并传递新点的x,y坐标,如下 :

MoveTo moveTo = new MoveTo(x,y );

如果未将任何值传递给构造函数,则新点将设置为(0,0).

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

 setX(value ); 
 setY(value);

示例 - 绘制复杂路径

在此示例中,我们将展示如何使用以下方式绘制以下形状路径,MoveTo 类.

复杂路径

将此代码保存在名为 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); 
//创建第3行
 LineTo line3 = new LineTo(232,52); 
//创建第4行
 LineTo line4 = new LineTo(269,250); 
//创建第4行
 LineTo line5 = new LineTo(108,71); 
//将所有元素添加到路径
 path.getElements().add(moveTo); 
 path.getElements().addAll(line1,line2,line3,line4,line5); 
//创建一个组对象
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

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

 javac ComplexShape.java 
 java ComplexShape

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

通过路径绘制弧

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

S.NoShape&描述
1LineTo

路径元素用于绘制直线从当前位置到指定坐标中的一个点.它由名为 LineTo 的类表示.此类属于包 javafx.scene.shape .

2HlineTo

路径元素 HLineTo 用于将水平线绘制到当前位置指定坐标中的点.它由名为 HLineTo 的类表示.此类属于包 javafx.scene.shape .

3VLineTo

路径元素垂直线用于从当前位置绘制指定坐标中的点的垂直线.它由名为 VLineTo 的类表示.此类属于包 javafx.scene.shape .

4QuadCurveTo

路径元素二次曲线用于将二次曲线绘制到当前位置指定坐标中的点.它由名为 QuadraticCurveTo 的类表示.此类属于包 javafx.scene.shape .

5CubicCurveTo

路径元素三次曲线用于将三次曲线绘制到当前位置指定坐标中的点.它由名为 CubicCurveTo 的类表示.此类属于包 javafx.scene.shape .

6ArcTo

路径元素 Arc 用于将弧线绘制到当前位置指定坐标中的点.它由名为 ArcTo 的类表示.此类属于包 javafx.scene.shape .

2D对象的属性

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

  • Stroke Type

  • Stroke Width

  • Stroke Fill

  • Stroke

  • Stroke Line

  • Stroke Miter Limit

  • Stroke Line Cap

  • Smooth

2D对象操作

如果我们添加更多如果一个形状与一个组相比,第一个形状与第二个形状重叠,如下所示.

Operations On 2D Objects

除了转换(旋转,缩放,平移等),转换(动画)之外,您还可以对2D对象执行三个操作,即 -  联合,减法交叉点.

S.NoOperation&描述
1Union Operation

此操作将两个或多个形状作为输入并返回它们占用的区域.

2Intersection Operation

此操作将两个或多个形状作为输入和返回它们之间的交叉区域.

3Subtraction Operation

此操作需要两个或多个形状作为输入.然后,它返回第一个形状的区域,不包括与第二个形状重叠的区域.