在Codename One中实现Y轴翻转（倒置）的正确代码方案

背景 #

在Java Swing中可以通过AffineTransform实现Y轴倒置（从下到上绘图），示例代码如下：

import javax.swing.*;

import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.geom.AffineTransform;

public class InvertedYAxisSquare extends JPanel {

    public static void main(String[] args) {
        JFrame frame = new JFrame("Inverted Y-Axis Square");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.add(new InvertedYAxisSquare());
        frame.setSize(400, 400);
        frame.setLocationRelativeTo(null);
        frame.setVisible(true);
    }

    @Override
    protected void paintComponent(Graphics g) {
        super.paintComponent(g);
        Graphics2D g2d = (Graphics2D) g.create();
        g2d.setColor(Color.BLUE);
        AffineTransform at = new AffineTransform();
        at.scale(1, -1);
        at.translate(0, -getHeight());
        g2d.transform(at);
        g2d.fillRect(50, 0, 100, 111);
        g2d.dispose();
    }
}

但直接照搬变换逻辑到Codename One时会出现位置错误，原尝试代码如下：

@Override
public void paint(Graphics g) {
    super.paint(g);
    int height = getHeight();
    Transform t = Transform.makeIdentity();
    t.scale(1, -1);
    t.translate(0, -height);
    g.setTransform(t);
    g.setColor(0x0000ff);
    g.fillRect(50, 0, 100, 100);
    g.resetAffine();
}

正确实现代码 #

@Override
public void paint(Graphics g) {
    super.paint(g);
    int height = getHeight();
    Transform t = Transform.makeIdentity();
    // 先将原点平移到容器底部，再进行Y轴翻转
    t.translate(0, height);
    t.scale(1, -1);
    g.setTransform(t);
    g.setColor(0x0000ff);
    // 此时(50, 0)对应容器左下角位置，绘制的方块会从底部开始向上延伸
    g.fillRect(50, 0, 100, 100);
    g.resetAffine();
}

关键说明 #

Codename One的Transform变换应用顺序与Swing相反：

• Swing中transform()方法是将新变换追加到现有变换链，执行顺序是先添加的先应用
• Codename One中setTransform()是直接设置变换矩阵，变换方法（translate/scale）的调用顺序是后调用的先应用

因此正确的逻辑是先执行平移（将原点移到容器底部），再执行Y轴缩放翻转，这样才能让绘制的图形对应到预期的底部位置。

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