Bài 17: Sử dụng JavaFX 2D Shapes

Nội dung bài viết này nhằm hướng dẫn các bạn tìm hiểu về JavaFX Canvas API, sử dụng JavaFX 2D Shapes trong JavaFX để có thể tạo được một dạng hình học như hình tròn, hình vuông… trên tọa độ mặt phẳng XY.

Sử dụng JavaFX 2D Shapes:

– Trong JavaFX một 2D Shapes là một dạng hình học được vẽ trên mặt phẳng tọa độ XY bao gồm Line, Rectangle, Circle, Ellipse, Polygon, Polyline, Cubic Curve, Quad Curve…

– Để sử dụng JavaFX 2D Shapes bạn cần tìm hiểu về API Canvas JavaFX. Nó được định nghĩa bởi các lớp Canvas, CanvasBuilder và GraphicsContext thuộc gói javafx.scene.canvas

– Canvas là một phân lớp của Node nên nó có thể được sử dụng trong JavaFX. Đầu tiên bạn cần tạo ra một đối tượng Canvas, sau đó lấy GraphicsContext của nó và gọi thao tác vẽ để hiển thị hình dạng hình học lên màn hình.

Download full source code bài viết ngay bên dưới.

Sử dụng JavaFX 2D Shapes

1. Vẽ nét thẳng trong JavaFX 2D Shapes

– Vẽ nét thẳng trong JavaFX là đường cơ bản, để có thể vẽ được bạn cần xác định hai điểm tọa độ để tạo thành một đường thẳng.

– Đầu tiên bạn cần tạo lớp Canvas với chiều rộng và chiều cao nhằm xác định kích thước của hình ảnh được hiển thị.

– Gọi phương thức getGraphicsContext2D () nhằm trả về một đối tượng GraphicsContext

– Phương thức beginPath() bắt đầu tạo một đường thẳng mới.

– Phương thức moveTo() di chuyển đến tọa độ điểm xuất phát, phương thức lineTo() để vẽ một nét thẳng với tọa độ XY.

– Ví dụ sau đây sẽ mô phỏng vẽ 3 đường thẳng trên tọa độ XY để tạo thành một hình tam giác như sau:

– Kết quả sau khi chạy đoạn mã chương trình trên:

Sử dụng JavaFX 2D Shapes

– Hoặc phức tạp hơn là một ngôi sao 5 cánh:

– Kết quả sau khi chạy đoạn mã chương trình trên:

Sử dụng JavaFX 2D Shapes

2. Một số dạng hình học cơ bản trong JavaFX 2D Shapes

Rectangle, Circle, Ellipse là một trong những dạng hình học cơ bản trong JavaFX.

– Kết quả sau khi chạy đoạn mã chương trình trên:

Sử dụng JavaFX 2D Shapes

– Để hình thêm sinh động, chúng ta có thể tạo thêm một vài hiệu ứng như là tạo hiệu ứng trong suốt:

– Kết quả sau khi chạy đoạn mã chương trình trên:

Sử dụng JavaFX 2D Shapes

Hoặc thêm một hiệu ứng khác cho hình:

Sử dụng JavaFX 2D Shapes

Đoạn mã cho ví dụ trên như sau:

 

Lời kết: Như vậy toàn bộ nội dung bài viết này hướng dẫn các bạn sử dụng JavaFX 2D Shapes trong JavaFX. Ngoài ra, bạn có thể xem thêm nội dung các bài viết khác tại chuyên mục JavaFx để bổ sung thêm kiến thức về ngôn ngữ này.

(Tác giả: Tùng Dương)

Bình luận

Loading...