JavaFX Canvas：如何实现图片扁平化及Y轴3D旋转

当然可以实现！不过你说得对，JavaFX Canvas的GraphicsContext自带的仿射变换确实只能处理线性的2D变换（比如旋转、切变、缩放），没法直接搞出透视效果——因为透视是非线性变换，得靠手动计算3D投影来实现。

因为图片本身是平面的，我们不需要逐个像素处理（那样太费性能），只需要计算它四个顶点的3D旋转+透视投影后的2D坐标，再用JavaFX提供的透视变换API把图片“拉伸”成对应的形状，就能模拟出绕Y轴旋转的3D透视效果。

1. 核心数学公式 #

绕Y轴旋转变换 #

假设我们把图片放在3D空间中，中心对齐画布中心，初始深度为-depth（让它处于相机前方）。每个顶点的原始3D坐标为(x, y, z)，绕Y轴旋转θ角后的坐标计算如下：

x' = x * cosθ - z * sinθ
y' = y  // Y轴旋转不改变Y坐标
z' = x * sinθ + z * cosθ

透视投影 #

我们模拟一个位于(0, 0, viewDistance)的相机，投影平面就是Canvas所在的z=0平面。投影后的2D坐标公式：

x'' = 画布中心X + (viewDistance * x') / (viewDistance + z')
y'' = 画布中心Y + (viewDistance * y') / (viewDistance + z')

viewDistance越小，透视畸变越强；越大则越接近无透视的正交投影。

2. JavaFX代码实现 #

下面是一个完整的实时旋转动画示例，用AnimationTimer驱动，通过perspectiveTransform绘制带透视的图片：

import javafx.animation.AnimationTimer;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.image.Image;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class Canvas3DRotationDemo extends Application {
    private static final int CANVAS_W = 800;
    private static final int CANVAS_H = 600;
    private static final double VIEW_DISTANCE = 500;
    private static final double IMAGE_DEPTH = 200;  // 图片在3D空间的初始深度
    private double rotationAngle = 0;
    private Image targetImage;

    @Override
    public void start(Stage stage) {
        Canvas canvas = new Canvas(CANVAS_W, CANVAS_H);
        GraphicsContext gc = canvas.getGraphicsContext2D();

        // 替换成你的图片路径
        targetImage = new Image("your-image.png");
        double imgW = targetImage.getWidth();
        double imgH = targetImage.getHeight();
        double halfImgW = imgW / 2;
        double halfImgH = imgH / 2;

        // 实时旋转动画
        new AnimationTimer() {
            @Override
            public void handle(long now) {
                gc.clearRect(0, 0, CANVAS_W, CANVAS_H);
                rotationAngle += 0.01;  // 每次旋转0.01弧度

                // 画布中心坐标
                double centerX = CANVAS_W / 2;
                double centerY = CANVAS_H / 2;

                // 图片四个顶点的原始3D坐标（以图片中心为原点）
                double[][] vertices = {
                        {-halfImgW, -halfImgH, -IMAGE_DEPTH},
                        {halfImgW, -halfImgH, -IMAGE_DEPTH},
                        {halfImgW, halfImgH, -IMAGE_DEPTH},
                        {-halfImgW, halfImgH, -IMAGE_DEPTH}
                };

                double[] projX = new double[4];
                double[] projY = new double[4];
                double cos = Math.cos(rotationAngle);
                double sin = Math.sin(rotationAngle);

                // 计算每个顶点的旋转+投影结果
                for (int i = 0; i < 4; i++) {
                    double x = vertices[i][0];
                    double y = vertices[i][1];
                    double z = vertices[i][2];

                    // 绕Y轴旋转
                    double xRot = x * cos - z * sin;
                    double zRot = x * sin + z * cos;

                    // 透视投影+画布中心偏移
                    projX[i] = centerX + (VIEW_DISTANCE * xRot) / (VIEW_DISTANCE + zRot);
                    projY[i] = centerY + (VIEW_DISTANCE * y) / (VIEW_DISTANCE + zRot);
                }

                // 应用透视变换并绘制图片
                gc.save();
                gc.perspectiveTransform(
                        projX[0], projY[0],  // 左上
                        projX[1], projY[1],  // 右上
                        projX[2], projY[2],  // 右下
                        projX[3], projY[3]   // 左下
                );
                // 以图片中心为原点绘制，配合透视变换的顶点坐标
                gc.drawImage(targetImage, -halfImgW, -halfImgH);
                gc.restore();
            }
        }.start();

        stage.setScene(new Scene(new StackPane(canvas)));
        stage.setTitle("Canvas 3D Y-Axis Rotation");
        stage.show();
    }

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

3. 关键细节说明 #

• perspectiveTransform方法：这是JavaFX专门为透视变换提供的API，它接受四个顶点坐标，将后续绘制的内容映射到这个四边形区域，完美模拟透视收缩/拉伸效果。
• 坐标对齐：我们把图片中心和画布中心对齐，旋转时会绕中心转动，更符合直觉。
• 性能优势：只计算四个顶点的变换，而非逐个像素处理，大图片也能保持流畅动画。

如果需要更复杂的3D效果（比如多层叠加、光照），可以考虑JavaFX的原生3D API（如SubScene、MeshView），但单张图片的绕Y轴旋转+透视，用Canvas的这个方案完全足够。

内容的提问来源于stack exchange，提问作者M. Bach