องค์ประกอบเส้นทาง (Path Elements) ต่างๆ ใน JavaFX มีอะไรบ้าง

แพ็กเกจ javafx.scene.shape จัดเตรียมคลาสต่างๆ สำหรับวาดรูปทรง 2D แบบพื้นฐาน เช่น เส้นตรง วงกลม พหุเหลี่ยม และรูปวงรี เป็นต้น อย่างไรก็ตาม หากต้องการวาดรูปทรงที่ซับซ้อนและกำหนดเอง คุณจะต้องใช้คลาส Path

คลาส Path

คลาส Path ใช้แสดงโครงร่างทางเรขาคณิตของรูปทรง ช่วยให้คุณวาดเส้นทาง (path) ที่กำหนดเองได้

JavaFX จัดเตรียมองค์ประกอบเส้นทาง (path elements) หลายแบบ ซึ่งทั้งหมดมีให้เป็นคลาสในแพ็กเกจ javafx.scene.shape

• LineTo - แทนเส้นตรง วาดจากพิกัดปัจจุบันไปยังพิกัดใหม่
• HLineTo - แทนเส้นราบ วาดจากพิกัดปัจจุบันไปยังพิกัดใหม่
• VLineTo - แทนเส้นตั้งฉาก วาดจากพิกัดปัจจุบันไปยังพิกัดใหม่
• QuadCurveTo - แทนโค้งกำลังสอง วาดจากพิกัดปัจจุบันไปยังพิกัดใหม่
• CubicCurveTo - แทนโค้งกำลังสาม วาดจากพิกัดปัจจุบันไปยังพิกัดใหม่
• ArcTo - แทนเส้นโค้งโค้งมน วาดจากพิกัดปัจจุบันไปยังพิกัดใหม่
• MoveTo - ใช้ย้ายตำแหน่งของเส้นทางจากพิกัดปัจจุบันไปยังพิกัดใหม่

การสร้างเส้นทางโดยใช้ Path Elements

คลาส Path มี observable list ที่เก็บองค์ประกอบเส้นทางของเส้นทางปัจจุบัน ดังนั้นเพื่อวาดเส้นทาง:

• สร้างอินสแตนซ์ของคลาส PathElement ที่ต้องการ
• กำหนดคุณสมบัติของแต่ละ path โดยใช้เมธอด setter หรือส่งผ่านเป็นอาร์กิวเมนต์ให้คอนสตรักเตอร์
• สร้างอินสแตนซ์ของคลาส Path
• ดึง observable list ของ Path ที่สร้างขึ้นโดยใช้เมธอด getElements()
• เพิ่มอ็อบเจ็กต์ path element ทั้งหมดลงใน observable list ตามลำดับที่ต้องการ โดยใช้เมธอด add() หรือ addAll()
• สุดท้าย เพิ่ม path เข้ากับอ็อบเจ็กต์ Group

หมายเหตุ: คุณยังสามารถส่ง path elements ให้กับคอนสตรักเตอร์ของ Path โดยตรงได้อีกด้วย

ตัวอย่างโค้ด

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
import javafx.scene.shape.LineTo;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;

public class PathElementsExample extends Application {
    @Override
    public void start(Stage stage) {
        // วาดรูปทรง
        MoveTo moveTo = new MoveTo(208, 71);
        LineTo line1 = new LineTo(421, 161);
        LineTo line2 = new LineTo(226, 232);
        LineTo line3 = new LineTo(332, 52);
        LineTo line4 = new LineTo(369, 250);
        LineTo line5 = new LineTo(208, 71);
        
        // สร้าง Path โดยส่ง elements เข้าไปในคอนสตรักเตอร์
        Path path = new Path(moveTo, line1, line2, line3, line4, line5);
        path.setFill(Color.DARKCYAN);
        path.setStrokeWidth(8.0);
        path.setStroke(Color.DARKSLATEGREY);
        
        // เตรียม Stage
        Group root = new Group(path);
        Scene scene = new Scene(root, 595, 300, Color.BEIGE);
        stage.setTitle("การวาดโค้งมนผ่าน Path");
        stage.setScene(scene);
        stage.show();
    }
    
    public static void main(String[] args) {
        launch(args);
    }
}

ผลลัพธ์