Java位图字体：使用不同颜色混合1位图像

Question

我想在基于Java AWT的应用程序中实现简单的位图字体绘制。应用程序在Graphics对象上进行绘制，我想实现一个简单的算法：

1）加载一个文件（可能使用ImageIO.read(new File(fileName))），这是一个类似于以下内容的1位PNG文件：

即它是一个16*16（或者16*很多，如果我想支持Unicode）的8*8字符矩阵。黑色对应背景颜色，白色对应前景颜色。

2）逐个字符地绘制字符串，将位图的相关部分传输到目标Graphics上。到目前为止，我只成功了这样的一些操作：

    int posX = ch % 16;
    int posY = ch / 16;

    int fontX = posX * CHAR_WIDTH;
    int fontY = posY * CHAR_HEIGHT;

    g.drawImage(
            font,
            dx, dy, dx + CHAR_WIDTH, dy + CHAR_HEIGHT,
            fontX, fontY, fontX + CHAR_WIDTH, fontY + CHAR_HEIGHT,
            null
    );

它确实有效，但不幸的是，它原样复制文本，即我无法用所需的前景和背景颜色替换黑色和白色，甚至无法使背景透明。

因此，问题是：在Java中是否有一种简单（且快速！）的方法来将一个1位图的部分颜色化并贴到另一个图上（即在贴图过程中替换所有0像素为给定颜色，所有1像素为另一个颜色）？

我研究了几个解决方案，但它们都看起来不太优秀：

• 使用自定义着色BufferedImageOp，如this solution所述 - 这应该可行，但在每次 blit 操作之前重新着色位图似乎非常低效。
• 使用多个 32 位 RGBA PNG，alpha 通道设置为黑色像素的 0 和前景的最大值。每个所需的前景色都应该有自己预渲染的位图。这样我就可以使背景透明，并在 blitting 之前单独绘制矩形，然后选择一个用所需颜色预着色的字体位图，并在该矩形上绘制其一部分。对我来说似乎过于复杂 - 而且更糟糕的是 - 它将前景色的数量限制在相对较少的范围内（即我可以实际加载和持有数百或数千个位图，而不是数百万个）
• 捆绑和加载自定义字体，如this solution所述，可能可行，但据我所见，在Font#createFont文档中，AWT的Font似乎只能使用基于矢量的字体，而不是基于位图的字体。

你是否已经有实现这种功能的库？或者是时候转向一些更高级的图形库，比如lwjgl？

基准测试结果

我在一个简单的测试中测试了几种算法：我有两个字符串，每个字符串有71个字符，并连续将它们绘制在同一位置：

    for (int i = 0; i < N; i++) {
        cv.putString(5, 5, STR, Color.RED, Color.BLUE);
        cv.putString(5, 5, STR2, Color.RED, Color.BLUE);
    }

然后我测量时间并计算速度：每秒字符串数和每秒字符数。到目前为止，我测试过的各种实现产生了以下结果：

• 位图字体，16 * 16 字符位图：10991个字符串/秒，780391个字符/秒
• 位图字体，预分割图像：11048个字符串/秒，784443个字符/秒
• g.drawString()：8952个字符串/秒，635631个字符/秒
• 彩色位图字体，使用LookupOp和ByteLookupTable进行着色：404个字符串/秒，28741个字符/秒

- GreyCat

---

它应该能工作，但似乎效率很低。我相信性能分析胜过意见。 - Andrew Thompson

对于基准测试结果加1分。所以问题是：是否有任何渲染28K+字符/秒的方法达到此用例的最低规格要求？ - Andrew Thompson

我的当前目标是在8050字符控制台上达到大约25..30 FPS。理想情况下，这将是8050*30 ~ 120K字符/秒。28K将在全屏动画重绘时提供大约~7 FPS。我已经看了一下Notch在他的LD16游戏中所做的事情，并且似乎有一些原始位数组处理魔法。我将尝试更深入地挖掘这种可能性。 - GreyCat

Answer 1

您可以将每个位图转换为Shape（或多个），然后绘制Shape。有关获得Shape的过程，请参见平滑不规则路径。

例如

import java.awt.*;
import java.awt.event.*;
import java.awt.image.*;
import java.awt.geom.*;
import javax.swing.*;
import javax.swing.border.*;
import javax.swing.event.*;
import java.util.Random;

/* Gain the outline of an image for further processing. */
class ImageShape {

    private BufferedImage image;

    private BufferedImage ImageShape;
    private Area areaOutline = null;
    private JLabel labelOutline;

    private JLabel output;
    private BufferedImage anim;
    private Random random = new Random();
    private int count = 0;
    private long time = System.currentTimeMillis();
    private String rate = "";

    public ImageShape(BufferedImage image) {
        this.image = image;
    }

    public void drawOutline() {
        if (areaOutline!=null) {
            Graphics2D g = ImageShape.createGraphics();
            g.setColor(Color.WHITE);
            g.fillRect(0,0,ImageShape.getWidth(),ImageShape.getHeight());

            g.setColor(Color.RED);
            g.setClip(areaOutline);
            g.fillRect(0,0,ImageShape.getWidth(),ImageShape.getHeight());
            g.setColor(Color.BLACK);
            g.setClip(null);
            g.draw(areaOutline);

            g.dispose();
        }
    }

    public Area getOutline(Color target, BufferedImage bi) {
        // construct the GeneralPath
        GeneralPath gp = new GeneralPath();

        boolean cont = false;
        int targetRGB = target.getRGB();
        for (int xx=0; xx<bi.getWidth(); xx++) {
            for (int yy=0; yy<bi.getHeight(); yy++) {
                if (bi.getRGB(xx,yy)==targetRGB) {
                    if (cont) {
                        gp.lineTo(xx,yy);
                        gp.lineTo(xx,yy+1);
                        gp.lineTo(xx+1,yy+1);
                        gp.lineTo(xx+1,yy);
                        gp.lineTo(xx,yy);
                    } else {
                        gp.moveTo(xx,yy);
                    }
                    cont = true;
                } else {
                    cont = false;
                }
            }
            cont = false;
        }
        gp.closePath();

        // construct the Area from the GP & return it
        return new Area(gp);
    }

    public JPanel getGui() {
        JPanel images = new JPanel(new GridLayout(1,2,2,2));
        JPanel  gui = new JPanel(new BorderLayout(3,3));

        JPanel originalImage =  new JPanel(new BorderLayout(2,2));
        final JLabel originalLabel = new JLabel(new ImageIcon(image));

        originalImage.add(originalLabel);


        images.add(originalImage);

        ImageShape = new BufferedImage(
            image.getWidth(),
            image.getHeight(),
            BufferedImage.TYPE_INT_RGB
            );

        labelOutline = new JLabel(new ImageIcon(ImageShape));
        images.add(labelOutline);

        anim = new BufferedImage(
            image.getWidth()*2,
            image.getHeight()*2,
            BufferedImage.TYPE_INT_RGB);
        output = new JLabel(new ImageIcon(anim));
        gui.add(output, BorderLayout.CENTER);

        updateImages();

        gui.add(images, BorderLayout.NORTH);

        animate();

        ActionListener al = new ActionListener() {
            public void actionPerformed(ActionEvent ae) {
                animate();
            }
        };
        Timer timer = new Timer(1,al);
        timer.start();

        return gui;
    }

    private void updateImages() {
        areaOutline = getOutline(Color.BLACK, image);

        drawOutline();
    }

    private void animate() {
        Graphics2D gr = anim.createGraphics();
        gr.setColor(Color.BLUE);
        gr.fillRect(0,0,anim.getWidth(),anim.getHeight());

        count++;
        if (count%100==0) {
            long now = System.currentTimeMillis();
            long duration = now-time;
            double fraction = (double)duration/1000;
            rate = "" + (double)100/fraction;
            time  = now;
        }
        gr.setColor(Color.WHITE);
        gr.translate(0,0);
        gr.drawString(rate, 20, 20);

        int x = random.nextInt(image.getWidth());
        int y = random.nextInt(image.getHeight());
        gr.translate(x,y);

        int r = 128+random.nextInt(127);
        int g = 128+random.nextInt(127);
        int b = 128+random.nextInt(127);
        gr.setColor(new Color(r,g,b));

        gr.draw(areaOutline);

        gr.dispose();
        output.repaint();
    }

    public static void main(String[] args) throws Exception {
        int size = 150;
        final BufferedImage outline = javax.imageio.ImageIO.read(new java.io.File("img.gif"));

        ImageShape io = new ImageShape(outline);

        JFrame f = new JFrame("Image Outline");
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        f.add(io.getGui());
        f.pack();
        f.setResizable(false);
        f.setLocationByPlatform(true);
        f.setVisible(true);
    }
}

我认为左上角蓝色图片中FPS计数器存在十倍误差。50 FPS还可以理解，但500 FPS则显得不对。

- Andrew Thompson

---

这是一个相当尴尬的解决方案 - 如果我采用矢量方式，我宁愿将位图字体转换为矢量字体并使用它。我想更直接的方法会更快更容易实现。 - GreyCat

够了，别再瞎猜了！不要猜测，要进行测试。 - Andrew Thompson

感谢您的努力，这份奖励非常值得。您是正确的 - 我应该对提到的方法进行一些基准测试。我会尽量在进行测量时发布更新。 - GreyCat

我已经添加了一些基准测试结果 - 请查看更新的帖子。 - GreyCat

请查看我使用原始像素操作创建的新解决方案，如果您仍然感兴趣 :) 看起来它表现非常好。 - GreyCat

Answer 2

好的，看起来我已经找到了最佳解决方案。成功的关键是访问底层 AWT 结构中的原始像素数组。初始化大致如下：

public class ConsoleCanvas extends Canvas {
    protected BufferedImage buffer;
    protected int w;
    protected int h;
    protected int[] data;

    public ConsoleCanvas(int w, int h) {
        super();
        this.w = w;
        this.h = h;
    }

    public void initialize() {
        data = new int[h * w];

        // Fill data array with pure solid black
        Arrays.fill(data, 0xff000000);

        // Java's endless black magic to get it working
        DataBufferInt db = new DataBufferInt(data, h * w);
        ColorModel cm = ColorModel.getRGBdefault();
        SampleModel sm = cm.createCompatibleSampleModel(w, h);
        WritableRaster wr = Raster.createWritableRaster(sm, db, null);
        buffer = new BufferedImage(cm, wr, false, null);
    }

    @Override
    public void paint(Graphics g) {
        update(g);
    }

    @Override
    public void update(Graphics g) {
        g.drawImage(buffer, 0, 0, null);
    }
}

在这之后，您将拥有一个缓冲区，可以在画布更新时进行位块传输，并且还有一个基础的ARGB 4字节整数数组 - 数据。

单个字符可以像这样绘制：

private void putChar(int dx, int dy, char ch, int fore, int back) {
    int charIdx = 0;
    int canvasIdx = dy * canvas.w + dx;
    for (int i = 0; i < CHAR_HEIGHT; i++) {
        for (int j = 0; j < CHAR_WIDTH; j++) {
            canvas.data[canvasIdx] = font[ch][charIdx] ? fore : back;
            charIdx++;
            canvasIdx++;
        }
        canvasIdx += canvas.w - CHAR_WIDTH;
    }
}

这个方案使用一个简单的boolean[][]数组，其中第一个索引选择字符，第二个索引迭代原始的1位字符像素数据（true => 前景，false => 背景）。

我将尽快发布完整的解决方案，作为我的Java终端仿真类集的一部分。

这个解决方案的基准测试结果为26007个字符串/秒或1846553个字符/秒 - 这比以前最好的非彩色化drawImage()快2.3倍。

- GreyCat

---

"..1846553个字符/秒 - 这是2.3倍的速度.." 那有红条吗？;) 恭喜你的成功。希望在你整理好后能看到完整的解决方案。 - Andrew Thompson