Java Swing旋转平移BufferedImage时出现小幅抖动如何解决

问题现象 #

有一张宽66px、高75px的BufferedImage，当图像处于旋转角度状态下执行平移操作时，会出现小幅度抖动（类似画面微颤的效果）。该现象在图像尺寸越小、旋转角度接近水平/垂直方位（如87度这类接近直角的角度）时越明显。
测试程序操作逻辑：A/D键控制图像旋转，W/S键控制图像平移，可复现问题的完整初始代码如下：

import java.awt.Color;

import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.RenderingHints;
import java.awt.event.KeyEvent;
import java.awt.event.KeyListener;
import java.awt.geom.AffineTransform;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;

import javax.imageio.ImageIO;
import javax.swing.JFrame;
import javax.swing.JPanel;

public class Test extends JPanel {

    BufferedImage image;
    
    public double angle = 0;
    public Point center = new Point(160, 160);
    
    public Test() {
        
        try {
            image =  ImageIO.read(new File("filePath"));
        } catch (IOException e) {
            e.printStackTrace();
        }

        System.out.println(image.getWidth() + ", " + image.getHeight());

        JFrame frame = new JFrame();
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 
         
        this.setPreferredSize(new Dimension(1000, 500));
        frame.add(this); 
        this.setBackground(Color.gray);
        
        frame.addKeyListener(new KeyListener() {

            @Override
            public void keyTyped(KeyEvent e) {
                
            }

            @Override
            public void keyPressed(KeyEvent e) {
                
                double deltaAngle = 3;
                int speed = 3;
                
                if(e.getKeyCode() == KeyEvent.VK_A)
                    angle -= deltaAngle;
                else if(e.getKeyCode() == KeyEvent.VK_D)
                    angle += deltaAngle;
                else if(e.getKeyCode() == KeyEvent.VK_W)
                    center.translate(speed*Math.sin(Math.toRadians(angle)), -speed*Math.cos(Math.toRadians(angle)));
                else if(e.getKeyCode() == KeyEvent.VK_S)
                    center.translate(-speed*Math.sin(Math.toRadians(angle)), speed*Math.cos(Math.toRadians(angle)));
                
                frame.repaint();
            }

            @Override
            public void keyReleased(KeyEvent e) {
                
            }
            
        });

        frame.pack();
        frame.setLocationRelativeTo(null);
        frame.setVisible(true);
    }
    
    @Override
    public void paintComponent(Graphics g) {
        super.paintComponent(g);

        Graphics2D g2 = (Graphics2D) g;
        
        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
        g2.setRenderingHint(RenderingHints.KEY_STROKE_CONTROL, RenderingHints.VALUE_STROKE_PURE);   
        
        g2.drawString("Angle: " + Double.toString(angle), 20, 20);
        drawImageCentered(g2, rotateImage(image, angle), center);
        
    }
    
    public void drawImageAccurate(Graphics2D g, BufferedImage image, Point location) {
        AffineTransform transform = new AffineTransform();
        transform.translate(location.x, location.y);
        //transform.scale(1, 1);
        g.drawImage(image, transform, null);
    }
    
    public void drawImageCentered(Graphics2D g, BufferedImage image, Point location) {
        drawImageAccurate(g, image, new Point(location.x - image.getWidth()/2.0, location.y - image.getHeight()/2.0));
    }
    
    public static BufferedImage rotateImage(BufferedImage image, double angle) {
        if(angle == 0 || Double.isNaN(angle))
            return image;
        else {
            angle = Math.toRadians(angle);
            double x = Math.abs(Math.cos(angle));
            double y = Math.abs(Math.sin(angle));
            int width = image.getWidth();
            int height = image.getHeight();
            int nWidth = (int) Math.floor(width*x + height*y);
            int nHeight = (int) Math.floor(height*x + width*y);
            
            BufferedImage rotated = new BufferedImage(nWidth, nHeight, image.getType());
            Graphics2D tool = rotated.createGraphics();
            
            AffineTransform transformer = new AffineTransform();
            transformer.translate((nWidth - width)/2.0, (nHeight - height)/2.0);

            transformer.rotate(angle, width/2, height/2);
            
            tool.drawImage(image, transformer, null);
            tool.dispose();
            
            return rotated;
        }   
    }
    
    private class Point {
        public double x, y;
        
        public Point(double x, double y) {
            this.x = x;
            this.y = y;
        }
        
        public void translate(double x, double y) {
            this.x += x;
            this.y += y;
        }
    }

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

}

已尝试的优化手段：

• 配置抗锯齿渲染提示：

g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
g2.setRenderingHint(RenderingHints.KEY_STROKE_CONTROL, RenderingHints.VALUE_STROKE_PURE);   

• 使用AffineTransform实现精确坐标平移：

public void drawImageAccurate(Graphics2D g, BufferedImage image, Point location) {
    AffineTransform transform = new AffineTransform();
    transform.translate(location.x, location.y);
    //transform.scale(1, 1);
    g.drawImage(image, transform, null);
}

以上优化仅能小幅降低抖动幅度，仍存在明显的可观测微颤。

问题根因 #

抖动来自两层叠加的采样/对齐误差：

1. 每帧预生成旋转位图的逻辑存在多次整数截断：计算旋转后画布尺寸时用Math.floor强转int、旋转偏移量计算时的隐式取整，导致每帧角度变化时，预生成的旋转位图本身就带有亚像素级的内容偏移
2. 默认渲染配置下Swing会将绘制坐标强制对齐到整数像素网格，亚像素级的位置偏移会被直接截断为整像素差，连续平移时就会出现一像素幅度的跳变，也就是肉眼可见的抖动

解决方案 #

1. 移除预旋转生成中间位图的逻辑，单次变换完成所有绘制操作 #

不要每帧创建新的旋转后BufferedImage，将平移、旋转的所有变换逻辑合并到同一个AffineTransform中，直接绘制原始图像，从根源上避免中间环节的多次取整误差。修改后的paintComponent逻辑如下：

@Override
public void paintComponent(Graphics g) {
    super.paintComponent(g);
    Graphics2D g2 = (Graphics2D) g;
    
    // 配置渲染参数
    g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
    g2.setRenderingHint(RenderingHints.KEY_STROKE_CONTROL, RenderingHints.VALUE_STROKE_PURE);
    // 开双线性插值，避免旋转采样的像素跳变
    g2.setRenderingHint(RenderingHints.KEY_INTERPOLATION, RenderingHints.VALUE_INTERPOLATION_BILINEAR);
    // 开启亚像素度量，禁止坐标自动取整到整像素网格
    g2.setRenderingHint(RenderingHints.KEY_FRACTIONALMETRICS, RenderingHints.VALUE_FRACTIONALMETRICS_ON);

    g2.drawString("Angle: " + angle, 20, 20);
    
    // 合并所有变换：移到中心点 -> 旋转 -> 偏移回图像中心对齐，全程保留double精度
    AffineTransform transform = new AffineTransform();
    transform.translate(center.x, center.y);
    transform.rotate(Math.toRadians(angle));
    transform.translate(-image.getWidth()/2.0, -image.getHeight()/2.0);
    g2.drawImage(image, transform, null);
}

修改后可以直接删掉原来的rotateImage、drawImageAccurate、drawImageCentered方法，减少不必要的对象创建和性能开销。

2. 显式开启双缓冲 #

在面板构造方法中添加setDoubleBuffered(true);，避免绘制过程中出现的画面撕裂感，进一步提升绘制稳定性。

3. 避免手动对坐标做取整操作 #

所有位置、角度、变换参数全程保留double类型精度，不要手动调用Math.floor/Math.round对坐标做整数截断，所有像素对齐逻辑交给渲染管线的插值模块处理，避免累积位置误差。
以上方案可以彻底消除旋转平移时的画面抖动，也是2D游戏引擎处理精灵旋转移动的标准实现逻辑。

内容的提问来源于stack exchange，提问作者LuckyBandit74