จากสมศรี 422R สู่หุ่นยนต๋ในยุค llm

สอนสร้างเมนูภาพแบบเลื่อนแนวนอนใน JavaFX ด้วยมุมมอง 3 มิติ 

บทความนี้จะสอนวิธีสร้างเมนูภาพเลื่อนแนวนอนใน JavaFX ที่ให้ความรู้สึกแบบ 3 มิติ โดยภาพตรงกลางจะมีขนาดใหญ่ที่สุด และภาพด้านข้างจะเล็กลงเหมือนมองจากมุมมองกระบอกทรงกลม

---

สิ่งที่ต้องใช้

1. JavaFX SDK 
2. Maven สำหรับการจัดการ Dependency 

---

การทำงานของโปรแกรม

1. ใช้ Perspective Transform และการปรับขนาด (Scaling) เพื่อสร้างเอฟเฟกต์ 3 มิติ
2. ใช้ Timeline หรือ Animation เพื่อสร้างการเลื่อนภาพแบบนุ่มนวล
3. ใช้ Event Handling เพื่อตรวจจับการกดปุ่มหรือการโต้ตอบจากผู้ใช้

---

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

import javafx.animation.*;
import javafx.application.Application;
import javafx.scene.*;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
import javafx.util.Duration;

import java.util.ArrayList;
import java.util.List;

public class ImageSlider3D extends Application {
    private static final double IMAGE_SIZE = 150;
    private static final double SCALE_FACTOR = 1.5;
    private static final double SPACING = 50;
    private static final int CENTER_INDEX = 2;

    private List<ImageView> imageViews = new ArrayList<>();
    private int currentIndex = CENTER_INDEX;

    @Override
    public void start(Stage stage) {
        HBox imageContainer = new HBox(SPACING);
        imageContainer.setAlignment(javafx.geometry.Pos.CENTER);

        // โหลดภาพ
        for (int i = 1; i <= 5; i++) {
            ImageView imageView = new ImageView(new Image("image" + i + ".jpg"));
            imageView.setFitWidth(IMAGE_SIZE);
            imageView.setFitHeight(IMAGE_SIZE);
            imageViews.add(imageView);
        }

        imageContainer.getChildren().addAll(imageViews);
        updateImageSizes();

        Scene scene = new Scene(new StackPane(imageContainer), 800, 400);
        scene.setOnKeyPressed(event -> {
            switch (event.getCode()) {
                case LEFT -> slideLeft();
                case RIGHT -> slideRight();
            }
        });

        stage.setScene(scene);
        stage.setTitle("เมนูภาพ 3 มิติ");
        stage.show();
    }

    private void slideLeft() {
        if (currentIndex > 0) {
            currentIndex--;
            animateSlide();
        }
    }

    private void slideRight() {
        if (currentIndex < imageViews.size() - 1) {
            currentIndex++;
            animateSlide();
        }
    }

    private void animateSlide() {
        Timeline timeline = new Timeline();

        for (int i = 0; i < imageViews.size(); i++) {
            ImageView imageView = imageViews.get(i);
            double targetScale = (i == currentIndex) ? SCALE_FACTOR : 1.0;
            double targetX = (i - currentIndex) * (IMAGE_SIZE + SPACING);

            KeyValue kvScaleX = new KeyValue(imageView.scaleXProperty(), targetScale, Interpolator.EASE_BOTH);
            KeyValue kvScaleY = new KeyValue(imageView.scaleYProperty(), targetScale, Interpolator.EASE_BOTH);
            KeyValue kvTranslateX = new KeyValue(imageView.translateXProperty(), targetX, Interpolator.EASE_BOTH);

            timeline.getKeyFrames().add(new KeyFrame(Duration.millis(300), kvScaleX, kvScaleY, kvTranslateX));
        }

        timeline.play();
    }

    private void updateImageSizes() {
        for (int i = 0; i < imageViews.size(); i++) {
            ImageView imageView = imageViews.get(i);
            double scale = (i == currentIndex) ? SCALE_FACTOR : 1.0;
            imageView.setScaleX(scale);
            imageView.setScaleY(scale);
            imageView.setTranslateX((i - currentIndex) * (IMAGE_SIZE + SPACING));
        }
    }

    public static void main(String[] args) {
        launch();
    }
}

---

การตั้งค่าใน pom.xml

หากคุณใช้ Maven ในโปรเจ็กต์ JavaFX ให้เพิ่ม Dependency ต่อไปนี้ลงในไฟล์ pom.xml:

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.example</groupId>
    <artifactId>image-slider-3d</artifactId>
    <version>1.0-SNAPSHOT</version>

    <properties>
        <java.version>17</java.version>
        <javafx.version>20</javafx.version>
    </properties>

    <dependencies>
        <!-- JavaFX Modules -->
        <dependency>
            <groupId>org.openjfx</groupId>
            <artifactId>javafx-controls</artifactId>
            <version>${javafx.version}</version>
        </dependency>
        <dependency>
            <groupId>org.openjfx</groupId>
            <artifactId>javafx-graphics</artifactId>
            <version>${javafx.version}</version>
            <classifier>win</classifier> <!-- เปลี่ยนเป็น mac หรือ linux ตามระบบปฏิบัติการ -->
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.8.1</version>
                <configuration>
                    <source>${java.version}</source>
                    <target>${java.version}</target>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.openjfx</groupId>
                <artifactId>javafx-maven-plugin</artifactId>
                <version>0.0.8</version>
                <executions>
                    <execution>
                        <goals>
                            <goal>run</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>
</project>

---

วิธีการใช้งาน

1. วางไฟล์รูปภาพ (image1.jpg, image2.jpg, ฯลฯ) ไว้ในโฟลเดอร์ resources ของโปรเจ็กต์
2. ใช้คำสั่ง mvn javafx:run เพื่อรันโปรแกรม

---

ผลลัพธ์

เมื่อคุณรันโปรแกรม จะเห็นเมนูภาพที่เลื่อนได้ โดยภาพตรงกลางจะขยายใหญ่ และภาพด้านข้างจะมีขนาดเล็กลงตามลำดับ พร้อมเอฟเฟกต์เลื่อนแบบ 3 มิติที่นุ่มนวล