Phần 6 : Hình vẽ 2D trong JavaFX
Trong phần này, chúng ta cùng tìm hiểu về các hình vẽ cơ bản dưới dạng2D. Các hình vẽ 2D được hổ trợ trong JavaFX là :
- Arc
- Circle
- CubicCurve
- Ellipse
- Line
- Path
- Polygon
- Polyline
-QuadCurve
- Rectangle
- SVGPath
- Text
Chúng ta sẽ lần lượt tìm hiểu từng hình vẽ :
I. Line :
Chúng ta sử dụng Line để vẽ các đường thẳng trong javafx, đó là javafx.scene.shape.Line class. Khi tạo 1 đối tượng Line, bạn cần chỉ ra tọa độ điểm bắt đầu và tọa độ điểm kết thúc. Có 2 cách tạo đối tượng Line:
- Cách 1 : Cung cấp các giá trị kiểu double dưới dạng tham số trong hàm dựng theo thứ tự startX, startY, endX và endY
Ví dụ : Line line = new Line(50,60,70,80)
Trong đó :
+ Tọa độ điểm bắt đầu là (50,60)
+ Tọa độ điểm kết thúc là (70,80)
+ Mặc định độ rộng của line là 1.0
+ Mặc định màu sắc của line là black
- Cách 2 : sử dụng phương thức setStartX(...),setStartY(...), setEndX(...), setEndY(...), để thiết lập tọa độ cho line:
Ví dụ : Line line = new Line();
line. setStartX(50);
line. setStartY(60);
line. setEndX(70);
line. setEndY(70);
Tất cả các hình vẽ cơ bản trong javafx đều là class con của javafx.scene.shape.Shape.
Shape định nghĩa các thuộc tính nâng cao mà chúng ta có thể dùng để
thiết lập cho hình vẽ. Để sử dụng những thuộc tính này, chúng ta sử dụng
phương thức set.
Thuộc tính
|
Kiểu dữ liệu
|
Miêu tả
|
fill
|
javafx.scene.paint.Paint
|
màu sắc bên trong hình vẽ
|
smooth
|
Boolean
|
true làm mịn những đường răng cưa, ngược lại là false
|
strokeDashOffset
|
Double
|
Khoảng chừa trống trong kiểu dứt nét.
|
strokeLineCap (*)
|
javafx.scene.shape.StrokeLineCap
|
Chọn style cho hai đầu của line. Có 3 style : StrokeLineCap.BUTT, StrokeLineCap.ROUND, StrokeLineCap.SQUARE (mặc định).
|
strokeLineJoin
(*)
|
javafx.scene.shape.StrokeLineJoin
|
chọn style khi các line tiếp xúc nhau.Có 3 style : StrokeLineJoin.MITER, StrokeLineJoin.BEVEL, StrokeLineJoin.ROUND.
|
strokeMiterLimit
(*)
|
Double
|
Giới hạn của 1 khớp nối. (Chỉ sử dụng khi lựa chọn StrokeLineJoin.MITER)
|
stroke (*)
|
javafx.scene.paint.Paint
|
màu sắc của line
|
strokeType(*)
|
javafx.scene.shape.StrokeType
|
Nét vẽ xung quanh 1 shape. Có 3 type : StrokeType.CENTERED, StrokeType.INSIDE, StrokeType.OUTSIDE.
|
strokeWidth
|
Double
|
Độ rộng của line.
|
Lưu ý : những thuộc tính (*) chỉ thể hiện rõ khi strokeWidth có giá trị lớn hơn 5.
Ngoài những thuộc tính trên Shape còn định nghĩa 3 phương thức kiểu static dành cho sự giao nhau của 2 hình vẽ
Kiểu trả về
|
Phương thức
|
Miêu tả
|
static Shape
|
intersect(Shape shape1, Shape shape2)
|
trả về 1 hình mới được tạo dưới dạng sự giao nhau của 2 hình vẽ
|
static Shape
|
subtract(Shape shape1, Shape shape2)
|
trả về 1 hình mới được tạo bởi loại bỏ hình thứ 2
|
static Shape
|
union(Shape shape1, Shape shape2)
|
trả về 1 hình mới được tạo dưới dạng sự kết hợp của 2 hình vẽ.
|
Ví dụ :
vẽ một đường thẳng dưới dạng dứt khúc và thuộc tính strokeDashOffset
được kết hợp với Slider, tạo hiện tượng khi dịch chuyển thumb của Slider
thì đường thẳng di chuyển.
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Slider;
import javafx.scene.paint.Color;
import javafx.scene.shape.Line;
import javafx.scene.shape.StrokeLineCap;
import javafx.stage.Stage;
public class exampleLine2D extends Application {
public void start(Stage primaryStage) {
Group root = new Group();
//-------------- Vẽ Line---------------
// tạo 1 Line màu xanh lá cây
Line line = new Line(10, 10, 270, 10);
line.setStroke(Color.GREEN);
// độ rộng của Line là 10
line.setStrokeWidth(10);
// 2 đầu của Line theo định dạng StrokeLineCap.BUTT
line.setStrokeLineCap(StrokeLineCap.BUTT);
// tạo line dạng dứt khúc theo định nghĩa bên dưới
// 25pixel đầu sẽ hiển thị, 10pixel kế tiếp ẩn, 5pixel kế tiếp hiển thị, 20pixel kế tiếp ẩn
// lặp lại như thế cho đến hết chiều dài của line
line.getStrokeDashArray().addAll(25.0, 10.0, 5.0, 20.0);
// thiết lập giá trị DashOffset
line.setStrokeDashOffset(0);
root.getChildren().add(line);
//--------------- tạo Slider--------------
Slider slider = new Slider(0, 200, 0);
slider.setLayoutX(10);
slider.setLayoutY(35);
root.getChildren().add(slider);
// event khi thumb di chuyển thiết lập lại giá trị DashOffset
line.strokeDashOffsetProperty().bind(slider.valueProperty());
Scene scene = new Scene(root, 300, 250, Color.BEIGE);
primaryStage.setTitle("Hello World!");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
|
II. Hình chữ nhật - rectangle :
Để vẽ một rectangle,bạn phải chỉ ra : chiều dài, chiều rộng và vị trí góc trên bên trái. Sử dụng javafx.scene.shape.Rectangle class để vẽ rectangle.
Ví dụ : Rectangle rectangle = new Rectangle(10,20,200,100);
Trong đó :
+ vị trí x : 10
+ vị trí y : 20
+ chiều dài : 200
+ chiều rộng : 100
Ngoài
những thuộc tính chung, class Rectangle cũng thực hiện "arc width" và
"arc height", tính năng này được dùng để vẽ tròn ở các phần góc của
rectange.
Ví dụ : rectangle.setArcWidth(30);
rectangle.setArcHeight(50);
III. Circle- Hình tròn :
Sử dụng javafx.scene.shape.Circle để vẽ hình tròn. Các tham số chính dành cho Circle là :
+ Tọa độ trọng tâm centerX, centerY
+ Bán kính Radius
Ví dụ : vẽ hình tròn có trọng tâm là (50,50) và bán kính là 50
Circle circle = new Circle();
circle.setCenterX(10);
circle.setCenterY(10);
circle.setRadius(10);
IV. Ellipse:
Sử dụng javafx.scene.shape.Ellipse để vẽ 1 Ellipse. Các tham số chính dành cho Ellipse là :
+ Tọa độ trọng tâm centerX, centerY
+ Bán kính chiều ngang RadiusX
+ Bán kính chiều dọc RadiusY
Ví dụ : vẽ Ellipse có trọng tâm là (50,50) và bán kính chiều ngang là 50, bán kính chiều dọc 25
Ellipse ellipse = new Ellipse();
ellipse.setCenterX(50);
ellipse.setCenterY(50);
ellipse.setRadiusX(50);
ellipse.setRadiusY(25);
V. Arc - cung tròn :
Sử dụng javafx.scene.shape.Arc để vẽ 1 arc. Các tham số chính dành cho Arc là :
+ Tọa độ trọng tâm centerX, centerY
+ Bán kính chiều ngang RadiusX
+ Bán kính chiều dọc RadiusY
+ Góc bắt đầu (theo độ) là StartAngle : có giá trị từ 0-> 360
+ Chiều dài cung là Length : có giá trị từ 0->360
Ví dụ : vẽ Arc có trọng tâm là (50,50) và bán kính chiều ngang là 50, bán kính chiều dọc 25, góc bắt đầu là 45, chiều dài 250
Arc arc = new Arc();
arc.setCenterX(50.0f);
arc.setCenterY(50.0f);
arc.setRadiusX(50.0f);
arc.setRadiusY(25.0f);
arc.setStartAngle(45.0f);
arc.setLength(270.0f);
arc.setType(ArcType.ROUND);
Mặc khác, JavaFX hổ trợ 3 kiểu ArcType dành cho Arc:
VI. Polyline :
Vẽ
đường gấp khúc dựa trên thứ tự các tọa độ, bằng cách vẽ đường thẳng nối
tọa độ thứ nhất đến tọa độ thứ hai, kế tiếp vẽ đường thẳng nối tọa độ
thứ hai đến tọa độ thứ ba,... Sử dụng javafx.scene.shape.Polyline để vẽ 1 Polyline và phương thức getPoints() để liệt kê tất cả tọa độ
Ví dụ : vẽ 1 đường gấp khúc như bên dưới :
VII. Polygon :
Pologon
tương tự như Polyline, ngoại trừ Polyline không tự động đóng lại (tức
là không vẽ đường thẳng nối điểm bắt đầu và điểm cuối cùng). Sử dụng
javafx.scene.shape.Polygon để vẽ 1 Polygon và phương thức getPoints() để
liệt kê tất cả tọa độ.
Sử dụng lại Ví dụ trong Polyline nhưng không dùng Polyline mà dùng Polygon, kết quả là hình bên dưới
VIII. Cubic Curve - đường Cubic ,đường hàm bậc ba :
Cubic Curve thường được dùng để vẽ những hàm sóng như sóng điện từ, hàm sin,....Sử dụng javafx.scene.shape.CubicCurve class để tạo 1 cubic curve. Các tham số chính dành cho hàm CubicCurve là :
+ startX, startY : tọa độ điểm bắt đầu
+ controlX1, controlY1: tọa độ điểm control 1. Control này sẽ tác động đến đoạn từ điểm bắt đầu đến điểm giữa line.
+ controlX2, controlY2 : tọa độ điểm control 2. Control này sẽ tác động đến đoạn từ điểm giữa đến điểm kết thúc.
+, endX endY : tọa độ điểm kết thúc
Ví dụ : vẽ một đường cubic trên
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.CubicCurve;
import javafx.stage.Stage;
public class exampleCubicCuver extends Application {
public void start(Stage primaryStage) {
Group root = new Group();
//------------tạo đối tượng CubicCurve-----
CubicCurve cubicCurve = new CubicCurve();
// tọa độ điểm bắt đầu
cubicCurve.setStartX(20);
cubicCurve.setStartY(80);
// tọa độ điểm kết thúc
cubicCurve.setEndX(220);
cubicCurve.setEndY(80);
// tọa độ control 1
cubicCurve.setControlX1(80);
cubicCurve.setControlY1(-60);
// tọa độ control 2
cubicCurve.setControlX2(140);
cubicCurve.setControlY2(200);
// độ rộng nét vẽ là 5
cubicCurve.setStrokeWidth(5);
// màu nét vẽ là black
cubicCurve.setStroke(Color.BLACK);
// màu phía trong white
cubicCurve.setFill(Color.WHITE);
root.getChildren().add(cubicCurve);
Scene scene = new Scene(root, 300, 250);
primaryStage.setTitle("Hello World!");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
|
IX. QuadCurve - vẽ vòng cung :
Sử dụng javafx.scene.shape.QuadCurve class để vẽ một vòng cung. Các tham số chính dành cho QuadCurve là:
+ startX, startY : Tọa độ điểm bắt đầu
+ controlX, controlY : tọa độ điểm control. Control này sẽ tác động đến đoạn từ điểm bắt đầu đến điểm kết thúc.
+ endX, endY : tọa độ điểm kết thúc
X. Path :
Khi hình vẽ của bạn bao gồm nhiều nét vẽ cơ bản hợp lại, bạn có thể sử dụng javafx.scene.shape.Path
class để dễ dàng quản lý từng nét vẽ. Path quản lý từng nét vẽ dựa trên
tọa độ kết thúc của nét vẽ này là tọa độ bắt đầu của nét vẽ khác. Path
không dùng những class đã miêu tả trên mà được định nghĩa riêng một số
nét vẽ khác dành cho Path như :
+ ArcTo : tương tự Arc
+ CubicCurveTo : tương tự CubicCurve
+ HLineTo : vẽ Line ngang chỉ cần cung cấp tọa độ X
+ LineTo: tương tự Line
+ QuadCurveTo : tương tự QuadCurve
+ VLineTo : vẽ Line thẳng đứng chỉ cần cung cấp tọa độ Y
Để sử dụng Path, đầu tiên bạn phải khai báo tọa độ bắt đầu bằng đối tượng javafx.scene.shape.MoveTo .
Ví dụ : vẽ 1 hình nón
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.LineTo;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;
import javafx.scene.shape.QuadCurveTo;
import javafx.stage.Stage;
public class examplePath extends Application {
public void start(Stage primaryStage) {
Path path = new Path();
path.setStrokeWidth(3);
path.setFill(Color.YELLOW);
// tọa độ điểm bắt đầu của Path
MoveTo moveTo = new MoveTo(50, 50);
// Vẽ cung tròn có tọa độ bắt đầu là (50,50) là tọa độ MoveTo
// tọa độ kết thúc là (250,50)
// tọa độ control là (150,-30)
QuadCurveTo curveTo = new QuadCurveTo(150, -30, 250, 50);
// Vẽ Line1 có tọa độ bắt đầu là (250,50) là tọa độ kết thúc của QuadCurveTo
// tọa độ kết thúc là (150,200)
LineTo lineTo1 = new LineTo(150, 200);
// Vẽ Line2 có tọa độ bắt đầu là ((150,200) là tọa độ kết thúc của line1
// tọa độ kết thúc là (50, 50)
LineTo lineTo2 = new LineTo(50, 50);
// thêm tất cả các nét vẽ vào path
path.getElements().addAll(moveTo, curveTo, lineTo1, lineTo2);
Group root = new Group();
root.getChildren().add(path);
Scene scene = new Scene(root, 300, 250);
primaryStage.setTitle("Hello World!");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
|
XI. SVGPath :
Là một Path, nhưng tọa độ các điểm được biểu diễn dưới dạng chuỗi. Trong đó, định nghĩa các kí tự tương ứng với các nét vẽ :
Bảng trên chỉ đưa ra một số kí tự đối với các nét vẽ thường dùng, các bạn có thể tìm hiểu thêm tại địa chỉ http://www.w3.org/TR/SVG/paths.html.
Ví dụ : sử dụng lại Ví dụ vẽ hình nón trong phần Path
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.SVGPath;
import javafx.stage.Stage;
public class exampleSVGPath extends Application {
public void start(Stage primaryStage) {
SVGPath path = new SVGPath();
path.setContent("M50, 50, Q150, -30, 250, 50, L150, 200,L50, 50");
// trong đó : M50, 50 là MoveTo tọa độ (50,50)
// Q150, -30, 250, 50 là QuadCurveTo tọa độ kết thúc (250,50),tọa độ control (150,-30)
// L150, 200 là LineTo tọa độ kết thúc là (150, 200)
// L50, 50 là LineTo tọa độ kết thúc là (50, 50)
path.setStrokeWidth(3);
path.setFill(Color.YELLOW);
StackPane root = new StackPane();
root.getChildren().add(path);
Scene scene = new Scene(root, 300, 250);
primaryStage.setTitle("Hello World!");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
|
XII. Text :
Sử dụng javafx.scene.text.Text để vẽ chuỗi ký tự. Các tham số chính dành cho Text là :
+ Tọa độ bắt đầu X,Y
+ Chuỗi ký tự
Ví dụ : Text text = new Text();
text.setX(50);
text.setY(50);
text.setText("Java FX 8");
XIII. Font - Phông chữ:
Phông chữ dành cho text được javafx hổ trợ trong javafx.scene.text.Font class. Font class biểu diễn các phông chữ mà được dùng để hiển thị text trong màn hình.
Một số phương thức của Font class :
Kiểu trả về
|
Phương thức
|
Miêu tả
|
static Font
|
font(String family, double size)
|
tìm kiếm phông chữ dựa trên family và cung cấp kích thước cho nó.
|
static Font
|
font(String family,
FontPosture posture,
double size)
|
tìm kiếm phông chữ dựa trên family và cung cấp kiểu dáng, kích thước cho nó.
Vd :
Font serif = Font.font("Serif",
FontPosture.ITALIC, 30);
|
static Font
|
font(String family,
FontWeight weight,
double size)
|
tìm kiếm phông chữ dựa trên family và cung cấp độ đậm nhạt, kích thước cho nó.
Vd :
Font serif = Font.font("Serif",
FontWeight.BOLD, 30);
|
static Font
|
font(String family,
FontWeight weight,
FontPosture posture,
double size)
|
tìm kiếm phông chữ dựa trên family và cung cấp độ đậm nhạt,kiểu dáng ,kích thước cho nó.
|
static Font
|
getDefault()
|
trả
về phông chữ mặc định được dùng trong hệ thống, với kiểu dáng là
"Regular" và kích thước dựa vào môi trường desktop của user.
|
static java.util.List<String>
|
getFamilies()
|
trả về tất cả các phông có trong hệ thống
|
static java.util.List<String>
|
getFontNames()
|
trả về tất cả tên phông có trong hệ thống
|
static java.util.List<String>
|
getFontNames(String family)
|
trả về tất cả tên phông family có trong hệ thống
|
String
|
getFamily()
|
trả về tên phông chữ của 1 đối tượng Font.
|
String
|
getName()
|
trả tên phông chữ, kiểu dáng và cả độ đậm nhạt của 1 đối tượng Font.
|
double
|
getSize()
|
trả về kích thước phông chữ của 1 đối tượng Font.
|
String
|
getStyle()
|
trả về kiểu dáng và độ đậm nhạt của 1 đối tượng Font.
|
Ví dụ : vẽ chuỗi ký tự "JavaFX 8" tại tọa độ (50,50) với phông chữ là Serif, kích thước 30, kiểu dáng nghiêng và độ đậm.
Không có nhận xét nào:
Đăng nhận xét