摆动平移比例更改订单错位

Question

在使用 Java Swing 围绕缩放操作拆分翻译操作时，我发现了一些奇怪的事情。也许我在做一些愚蠢的事情，但我不确定在哪里。

在第一个版本中，我将图像居中、缩放，然后将其转换到所需位置。 在第二个版本中，我直接缩放图像，然后转换到所需的位置，以补偿具有非居中图像。 这两种解决方案应该是等价的。在考虑围绕一个点的旋转和另一个点的运动时，这一点也很重要。我也有这样做的代码...但是为什么这不起作用？

这是代码的两个版本。他们应该做完全相同的事情，但事实并非如此。以下是截图：

首先产生：screenshot1

二次生产：screenshot2

我认为draw1中围绕缩放操作的两个平移操作应该等同于draw2中的缩放平移操作。

有什么建议吗？

MCVE：

import java.awt.*;
import java.awt.event.*;
import java.awt.geom.*;
import java.awt.image.*;
import javax.imageio.ImageIO;
import javax.swing.*;
import java.net.URL;

public class Asteroid extends JComponent implements ActionListener {

    public static final Dimension FRAME_SIZE = new Dimension(640, 480);
    public double x = 200;
    public double y = 200;
    public int radius = 40;
    private AffineTransform bgTransfo;
    private final BufferedImage im2;
    private JCheckBox draw1Check = new JCheckBox("Draw 1", true);

    Asteroid() {
        BufferedImage img = null;
        try {
            img = ImageIO.read(new URL("https://i.stack.imgur.com/CWJdo.png"));
        } catch (Exception e) {
            e.printStackTrace();
        }
        im2 = img;
        initUI();
    }

    private final void initUI() {
        draw1Check.addActionListener(this);
        JFrame frame = new JFrame("FrameDemo");
        frame.add(BorderLayout.CENTER, this);
        frame.add(BorderLayout.PAGE_START, draw1Check);
        frame.pack();
        frame.setVisible(true);
        frame.setDefaultCloseOperation(frame.EXIT_ON_CLOSE);
    }

    public static void main(String[] args) {
        Asteroid asteroid = new Asteroid();
    }

    @Override
    public Dimension getPreferredSize() {
        return FRAME_SIZE;
    }

    @Override
    public void paintComponent(Graphics g0) {
        Graphics2D g = (Graphics2D) g0;
        g.setColor(Color.white);
        g.fillRect(0, 0, 640, 480);
        if (draw1Check.isSelected()) {
            draw1(g);
        } else {
            draw2(g);
        }
    }

    public void draw1(Graphics2D g) {//Draw method - draws asteroid
        double imWidth = im2.getWidth();
        double imHeight = im2.getHeight();
        double stretchx = (2.0 * radius) / imWidth;
        double stretchy = (2.0 * radius) / imHeight;

        bgTransfo = new AffineTransform();
        //centering
        bgTransfo.translate(-imWidth / 2.0, -imHeight / 2.0);
        //scaling
        bgTransfo.scale(stretchx, stretchy);
        //translation
        bgTransfo.translate(x  / stretchx, y / stretchy);

        //draw correct position
        g.setColor(Color.CYAN);
        g.fillOval((int) (x - radius), (int) (y - radius), (int) (2 * radius), (int) (2 * radius));

        //draw sprite
        g.drawImage(im2, bgTransfo, this);
    }

    public void draw2(Graphics2D g) {//Draw method - draws asteroid
        double imWidth = im2.getWidth();
        double imHeight = im2.getHeight();
        double stretchx = (2.0 * radius) / imWidth;
        double stretchy = (2.0 * radius) / imHeight;

        bgTransfo = new AffineTransform();

        //scale
        bgTransfo.scale(stretchx, stretchy);

        //translate and center
        bgTransfo.translate((x - radius) / stretchx, (y - radius) / stretchy);

        //draw correct position
        g.setColor(Color.CYAN);
        g.fillOval((int) (x - radius), (int) (y - radius), (int) (2 * radius), (int) (2 * radius));

        //draw sprite 
        g.drawImage(im2, bgTransfo, this);
    }

    @Override
    public void actionPerformed(ActionEvent e) {
        repaint();
    }
}

Answer 1

不确定这个问题是否仍然是开放的。无论如何，这是我的答案。

我认为理解这种行为的关键部分是AffineTransform.concatenate 和AffineTransform.preConcatenate 方法之间的区别。问题是生成的转换取决于应用子转换的顺序。 引用concatenateJavaDoc

以最常用的方式将 AffineTransform Tx 连接到此 AffineTransform Cx，以提供由 Tx 映射到以前的用户空间的新用户空间。 Cx 已更新以执行组合转换。用更新的变换Cx' 变换一个点p 相当于先用Tx 变换p，然后用原来的变换Cx 变换结果，如下所示：Cx'(p) = Cx(Tx(p))

将此与preConcatenate进行比较：

以一种不太常用的方式将 AffineTransform Tx 连接到此 AffineTransform Cx，以便 Tx 修改相对于绝对像素空间而不是相对于现有用户空间的坐标变换。 Cx 已更新以执行组合转换。用更新的变换Cx' 变换一个点p 相当于先用原始变换Cx 变换p，然后用Tx 变换结果，如下所示：Cx'(p) = Tx(Cx(p))

scale 和 translate 方法实际上是 concatenate。让我们在 draw1 方法中调用 3 个转换 C（中心）、S（比例）和 T（翻译）。所以你的复合转换实际上是C(S(T(p)))。特别是这意味着S 应用于T，但不应用于C，因此您的C 并没有真正使图像居中。一个简单的解决方法是更改​​S 和C 的顺序，但我认为更合适的解决方法是：

public void draw3(Graphics2D g) {
    //Draw method - draws asteroid
    double imWidth = im2.getWidth();
    double imHeight = im2.getHeight();
    double stretchx = (2.0 * radius) / imWidth;
    double stretchy = (2.0 * radius) / imHeight;

    AffineTransform bgTransfo = new AffineTransform();

    //translation
    bgTransfo.translate(x, y);

    //scaling
    bgTransfo.scale(stretchx, stretchy);

    //centering
    bgTransfo.translate(-imWidth / 2.0, -imHeight / 2.0);

    //draw correct position
    g.setColor(Color.CYAN);
    g.fillOval((int) (x - radius), (int) (y - radius), (int) (2 * radius), (int) (2 * radius));

    //draw sprite
    g.drawImage(im2, bgTransfo, this);
}

我认为这种方法的最大优点是您不必使用stretchx/stretchy重新计算T