如何在运行时制作动态图像？

Question

我正在开发一款基于 NetBeans 平台的纸牌游戏，并且正在努力理解动态图像。为什么是动态的？好吧，我希望卡片在运行时根据页面的更改（即名称、文本、成本等）进行调整。

我的第一个破解是创建一个组件（JPanel），其中预先放置了标签，我根据卡值加载文本/图像。这似乎工作得很好，但当我想到某些页面在以后的版本中具有不同的外观（意味着并非所有内容都在同一个地方）时，它就变得很麻烦。

所以我试图了解如何基于某种模板来做到这一点。

有什么想法吗？

有一个后续问题：JList of cards?

Answer 1

最后，我有时间回到这个问题，并能够找到一种使用 Java 2D 教程。

这些图片与我将在应用程序中使用的图片并不接近，但可以作为概念证明。

封装javaapplication3;

导入java.awt.*;导入 java.awt.font.FontRenderContext;进口
java.awt.font.LineBreakMeasurer；导入 java.awt.font.TextAttribute;
导入 java.awt.font.TextLayout;导入java.awt.image.BufferedImage；
导入java.io.File；导入java.io.IOException；进口
java.net.MalformedURLException；导入java.net.URL；进口
java.text.AttributedCharacterIterator;进口
java.text.AttributedString;导入java.util.ArrayList；进口
java.util.HashMap;导入java.util.logging.Level；进口
java.util.logging.Logger；导入javax.imageio.ImageIO;

/** * * @author Javier A. Ortiz Bultrón
*/ 公共类DefaultImageManager {

<前><代码>/**
* @param args 命令行参数
*/
公共静态无效主（字符串[] args）{
尝试 {
// TODO 代码应用逻辑在这里
DefaultImageManager 管理器 = new DefaultImageManager();
URL url = DefaultImageManager.class.getResource("weather-rain.png");
manager.getLayers().add(ImageIO.read(url));
url = DefaultImageManager.class.getResource("天气-太阳.png");
manager.getLayers().add(ImageIO.read(url));
manager.addText(new Font("Arial", Font.PLAIN, 10), "很多人相信文森特·梵高画出了他最好的作品"
+“他在普罗旺斯度过的两年期间。这里是他的地方”
+“画了《星夜》——有些人认为这是他最伟大的作品”
+“所有的作品。然而，随着他的艺术才华达到新的水平”
+“在普罗旺斯的高度，他的身心健康直线下降。”,
200, 150, 新点(0, 0));
管理器.生成();
} catch (MalformedURLException ex) {
Logger.getLogger(DefaultImageManager.class.getName()).log(Level.SEVERE,

空，例如);
} catch (IOException ex) {
Logger.getLogger(DefaultImageManager.class.getName()).log(Level.SEVERE,
空，例如）；
}
}
/**
* 用于创建最终图像的图层
*/
私有 ArrayList 层 = new ArrayList();
私有 ArrayList textLayers = new ArrayList();

<前><代码>/**
* @return 图层
*/
公共ArrayList获取图层（）{
返回层；
}

私有尺寸 getMaxSize() {
int 宽度 = 0，高度 = 0；
for (BufferedImage img : getLayers()) {
if (img.getWidth() > 宽度) {
宽度 = img.getWidth();
}
if (img.getHeight() > 高度) {
高度 = img.getHeight();
}
}
返回新尺寸（宽度，高度）；
}

public void addText(Font font, String text, int height, int width, Point location) {
BufferedImage 文本图像 = new BufferedImage(宽度, 高度,
BufferedImage.TYPE_INT_ARGB);
HashMap地图=
new HashMap();
map.put(TextAttribute.FAMILY, font.getFamily());
map.put(TextAttribute.SIZE, font.getSize());
map.put(TextAttribute.FOREGROUND, Color.BLACK);
AttributedString aString = new AttributedString(文本, 地图);
AttributedCharacterIterator 段落 = aString.getIterator();
// 段落中第一个字符的索引。
int paragraphStart = paragraph.getBeginIndex();
// 段落结尾后第一个字符的索引。
int paragraphEnd = paragraph.getEndIndex();
Graphics2D 图形 = textImage.createGraphics();
FontRenderContext frc = Graphics.getFontRenderContext();
// 用于对段落进行换行的 LineBreakMeasurer。
LineBreakMeasurer lineMeasurer = new LineBreakMeasurer(paragraph, frc);
// 将分隔宽度设置为组件的宽度。
浮动中断宽度=宽度；
浮动drawPosY = 0;
// 将位置设置为段落中第一个字符的索引。
lineMeasurer.setPosition(paragraphStart);

// 获取行，直到显示整个段落。
while (lineMeasurer.getPosition() < paragraphEnd) {
// 检索下一个布局。更聪明的程序也会缓存
// 这些布局直到重新调整组件大小。
TextLayout 布局 = lineMeasurer.nextLayout(breakWidth);

// 计算笔 x 位置。如果该段落是从右到左的，我们
// 将 TextLayouts 与面板的右边缘对齐。
// 注意：此示例中的英文文本不会发生这种情况。
// 注意：drawPosX 始终是放置文本左侧的位置。
浮动drawPosX =布局.isLeftToRight()
？ 0：breakWidth -layout.getAdvance()；

// 按布局的上升方向移动 y 坐标。
drawPosY +=layout.getAscent();

// 在 (drawPosX, drawPosY) 处绘制 TextLayout。
布局.draw(图形,drawPosX,drawPosY);

// 移动 y 坐标，为下一个布局做准备。
drawPosY +=layout.getDescent() +layout.getLeading();
}
getTextLayers().add(textImage);
}

公共无效生成（）抛出IOException {
尺寸大小 = getMaxSize();
BufferedImage FinalImage = new BufferedImage(size.width, size.height,
BufferedImage.TYPE_INT_ARGB);
for (BufferedImage img : getLayers()) {
FinalImage.createGraphics().drawImage(img,
0, 0, 尺寸.宽度, 尺寸.高度,
0, 0, img.getWidth(null),
img.getHeight(null),
无效的）;
}
for(BufferedImage 文本: getTextLayers()){
FinalImage.createGraphics().drawImage(文本，
0, 0, 文本.getWidth(), 文本.getHeight(),
0, 0, 文本.getWidth(null),
文本.getHeight(null),
无效的）;
}
文件输出文件 = new File("saved.png");
ImageIO.write(finalImage, "png", 输出文件);
}

/**
* @return 文本图层
*/
公共ArrayList获取文本图层（）{
返回文本图层；
}

/**
* @param textLayers 要设置的textLayers
*/
公共无效setTextLayers（ArrayListtextLayers）{
this.textLayers = textLayers;
} }

它仍然需要一些改进，特别是在文本的位置上，但它是有效的。我想我可以实现一个 xml 格式来存储所有这些信息，这样就可以轻松配置。在下面的示例中，太阳被绘制在雨的顶部，文本位于所有这些的顶部。对于我的应用程序，每一层将一起构建我想要的页面。

这是我使用的图像：

最终结果：