Java: Tạo hình dạng 2 chiều (2D)

Trong bài học trước, chúng ta đã thấy ứng dụng cơ bản của JavaFX, nơi chúng ta đã học cách tạo một cửa sổ trống và cách vẽ một đường thẳng trên mặt phẳng XY của JavaFX. Ngoài đường thẳng, chúng ta cũng có thể vẽ một số hình dạng 2D khác.

Hình dạng 2D

Nói chung, hình dạng 2D là hình dạng hình học có thể được vẽ trên mặt phẳng XY, bao gồm Đường thẳng, Hình chữ nhật, Hình tròn, v.v.

Sử dụng thư viện JavaFX, bạn có thể vẽ:

• Các hình dạng xác định trước như Đường thẳng, Hình chữ nhật, Hình tròn, Hình elip, Đa giác, Đường đa giác, Đường cong khối, Đường cong tứ giác, Vòng cung.
• Các phần tử đường dẫn như Phần tử đường dẫn MoveTO, Đường thẳng, Đường ngang, Đường thẳng đứng, Đường cong khối, Đường cong bậc hai, Vòng cung.
• Ngoài ra, bạn cũng có thể vẽ hình dạng 2D bằng cách phân tích cú pháp đường dẫn SVG.

Mỗi hình dạng 2D được đề cập ở trên được đại diện bởi một lớp và tất cả các lớp này thuộc về gói javafx.scene.shape. Lớp có tên Shape là lớp cơ sở của tất cả các hình dạng 2 chiều (2D) trong JavaFX.

Tạo hình dạng 2D

Để tạo biểu đồ, bạn cần:

• Khởi tạo lớp tương ứng của hình dạng yêu cầu.
• Đặt các thuộc tính của hình dạng.
• Thêm đối tượng hình dạng vào nhóm.

Khởi tạo lớp tương ứng

Để tạo một hình dạng 2D, trước hết bạn cần khởi tạo lớp tương ứng của nó.

Ví dụ, nếu bạn muốn tạo một đoạn thẳng, bạn cần khởi tạo lớp có tên Line như sau:

Line line = new Line();

Đặt thuộc tính của hình dạng

Sau khi khởi tạo lớp, bạn cần thiết lập các thuộc tính cho hình dạng bằng các phương thức setter.

Ví dụ, để vẽ một đoạn thẳng, bạn cần chuyển tọa độ x và y của nó của điểm đầu và điểm cuối của đoạn thẳng. Bạn có thể chỉ định các giá trị này bằng cách sử dụng các phương thức setter tương ứng của chúng như sau:

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

Thêm đối tượng hình dạng vào group

Cuối cùng, bạn cần thêm đối tượng của shape vào group bằng cách truyền nó dưới dạng tham số của hàm tạo như sau:

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

Bảng sau cung cấp cho bạn danh sách các hình dạng (lớp) khác nhau được cung cấp bởi JavaFX.

Vẽ thêm hình dạng thông qua lớp Path

Trong phần trước, chúng ta đã biết cách vẽ một số hình dạng đơn giản được xác định trước bằng cách khởi tạo các lớp và thiết lập các tham số tương ứng.

Tuy nhiên, chỉ những hình dạng được xác định trước này không đủ để tạo ra các hình phức tạp hơn ngoài các hình dạng ban đầu được cung cấp bởi gói javafx.shape.

Ví dụ, nếu bạn muốn vẽ một phần tử đồ họa như dưới đây, bạn không thể dựa vào những hình dạng đơn giản đó.

Lớp Path

Để vẽ các cấu trúc phức tạp như vậy JavaFX cung cấp một lớp có tên là Path. Lớp này đại diện cho đường viền hình học của một hình dạng.

Nó được đính kèm với một danh sách có thể quan sát được chứa các Phần tử Đường dẫn khác nhau như moveTo, LineTo, HlineTo, VlineTo, ArcTo, QuadCurveTo, CubicCurveTo.

Khi khởi tạo, lớp này xây dựng một đường dẫn dựa trên các phần tử đường dẫn đã cho.

Bạn có thể truyền các phần tử đường dẫn đến lớp này trong khi khởi tạo nó như sau:

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

Hoặc, bạn có thể lấy danh sách có thể quan sát và thêm tất cả các phần tử đường dẫn bằng phương thức addAll() như sau:

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

Bạn cũng có thể thêm các phần tử riêng lẻ bằng cách sử dụng phương thức add() như sau:

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

Di chuyển đến phần tử Đường dẫn

Phần tử đường dẫn MoveTo được sử dụng để di chuyển vị trí hiện tại của đường dẫn đến một điểm xác định. Nó thường được sử dụng để thiết lập điểm bắt đầu của một hình dạng được vẽ bằng cách sử dụng các phần tử đường dẫn.

Nó được đại diện bởi một lớp có tên LineTo của gói javafx.scene.shape. Nó có 2 thuộc tính của kiểu dữ liệu kép là:

• X - Tọa độ x của điểm mà một đường sẽ được vẽ từ vị trí hiện tại.
• Y - Tọa độ y của điểm mà một đường sẽ được vẽ từ vị trí hiện tại.

Bạn có thể tạo phần tử di chuyển đến đường dẫn bằng cách khởi tạo lớp MoveTo và chuyển tọa độ x, y của điểm mới như sau:

MoveTo moveTo = new MoveTo(x, y);

Nếu bạn không truyền bất kỳ giá trị nào cho hàm tạo, thì điểm mới sẽ được đặt thành (0,0).

Bạn cũng có thể đặt các giá trị thành tọa độ x, y, bằng cách sử dụng các phương thức setter tương ứng của chúng như sau:

setX(value); 
setY(value); 

Ví dụ - Vẽ một đường phức tạp

Trong ví dụ này, chúng ta sẽ chỉ ra cách vẽ hình dạng sau bằng cách sử dụng các lớp Path, MoveTo và Line.

Lưu mã sau trong một tệp với tên ComplexShape.java.

package sample;

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

Biên dịch và thực thi tệp java đã lưu từ dấu nhắc lệnh bằng các lệnh sau.

javac ComplexShape.java 
java ComplexShape

Khi thực thi, chương trình trên tạo ra một cửa sổ JavaFX hiển thị một cung tròn, được vẽ từ vị trí hiện tại đến điểm được chỉ định như hình dưới đây:

Sau đây là các phần tử (lớp) đường dẫn khác nhau được cung cấp bởi JavaFX. Các lớp này tồn tại trong gói javafx.shape. Tất cả các lớp này kế thừa lớp PathElement.

Thuộc tính của đối tượng 2D

Đối với tất cả các đối tượng 2D, bạn có thể đặt các thuộc tính khác nhau như tô màu, nét vẽ, StrokeType, v.v. Sau đây là một số các thuộc tính khác nhau của các đối tượng 2D:

• Stroke Type
• Stroke Width
• Stroke Fill
• Stroke
• Stroke Line
• Stroke Miter Limit
• Stroke Line Cap
• Smooth

Hoạt động trên các đối tượng 2D

Nếu chúng ta thêm nhiều hơn một hình vào một nhóm, hình đầu tiên sẽ được chồng lên bởi hình thứ hai như được hiển thị bên dưới.

Ngoài các phép biến đổi (xoay, chia tỷ lệ, dịch, v.v.), chuyển tiếp (hoạt ảnh), bạn cũng có thể thực hiện ba thao tác trên các đối tượng 2D là: Union, Subtraction và Intersection.