【发布时间】：2020-12-19 03:19:12
【问题描述】：
我的目标是使用 Processing 3 在 Windows 10 上为 Windows Xp 重制经典的 Freecell 纸牌游戏。
为此，我从here 下载了一组最类似于旧卡片外观的 svg 文件。
在我的代码中，我有一个名为 Deck 的类，其中包含一个 ArrayList 卡片，并且在构造时，它初始化卡片，为它们提供所需的 svg 文件的路径以及 x 和 y 坐标。
class Deck
{
String[] seeds = {"HEART", "DIAMOND", "CLUB", "SPADE"};
String[] values = {"1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13"};
ArrayList<Card> cards = new ArrayList<Card>();
Deck()
{
//Create the cards and store them into the array.
for(int seed = 0; seed < seeds.length; seed++)
{
for(int value = 0; value < values.length; value++)
{
String cardName = seeds[seed] + "-" + values[value] + ".svg";
cards.add(new Card(cardName));
}
}
//Shuffle the deck.
//this.shuffle();
//Give the cards x and y coordinates.
for(int c = 0; c < cards.size(); c++)
{
int x = cardSpace + (cardWidth+cardSpace)*(c%8);
int y = 32 + cardHeight + edge*2 + cardSpace + 25*(c/8);
cards.get(c).setxy(x, y);
}
}
void shuffle()
{
for(int c = cards.size()-1; c > 0; c--)
{
int k = (int)Math.floor(Math.random() * (c + 1));
Card card = cards.get(c);
cards.set(c, cards.get(k));
cards.set(k, card);
}
}
void render()
{
for(Card card : cards)
{
card.render();
}
}
}
卡类：
class Card
{
PShape svg;
int x;
int y;
Card(String svgName)
{
this.svg = loadShape(svgName);
}
void setxy(int x, int y)
{
this.x = x;
this.y = y;
}
boolean isMouseOver()
{
return mouseX > x && mouseX < (x+cardWidth) && mouseY > y && mouseY < (y+cardHeight);
}
void render()
{
shape(svg, x, y, cardWidth, cardHeight);
}
}
Deck 类的render() 方法每draw() 循环调用一次，frameRate 设置为 10。
无论如何，代码工作正常，唯一的问题是如何呈现两个 svg，如您在此处看到的：
由于某些原因，只有黑桃 5 和红心 jack 的内图完全倾斜。
但是，当使用 Inkscape 或任何浏览器打开时，它们看起来方向正确，因此我很困惑。
我尝试使用这两个 svg 的原始版本，但它们仍然呈现倾斜。我试图比较这两个 svg 的 xml，但我不明白是什么导致了问题。
它也可能正在处理中，但我不知道为什么或如何修复它。
任何帮助将不胜感激，在此先感谢。
编辑
根据 cmets 的要求添加主草图文件。
但是请注意，它已从上方的灰色条和矩形中剥离。
//Global objects.
Deck deck;
//Global objects.
//Global variables.
int edge = 2;
int cardSpace = 15;
int cardWidth = 100;
int cardHeight = 140;
//Global variables.
void settings()
{
int w = cardWidth*8 + cardSpace*9;
int h = cardHeight*5 + 32;
size(w, h);
}
void setup()
{
frameRate(30);
deck = new Deck(); //Initialized here because of loadImage().
}
void draw()
{
background(60, 145, 50);
deck.render();
}
【问题讨论】：
-
我很难过。我下载了图像文件，它们看起来还不错。你能发一个minimal reproducible example吗？
-
@KevinWorkman 好吧，这就是我所做的一切啊，我下载了图像并检查了它们，在 svg 编辑器和浏览器中它们看起来都很好。但是，当加载到处理中时，它们看起来像那样。我可以发布
draw()函数，但里面的所有内容都是绘制一堆矩形（您在顶部看到的那些），然后调用deck.render()。 -
如果无法运行代码，将很难进一步调试，因此我建议发布minimal reproducible example。请注意，这应该不是您的完整程序。尝试从头开始并仅画出有问题的卡片。
-
@KevinWorkman 我编辑了这个问题。现在好点了吗？无论如何，只画有问题的卡片会导致同样的问题，如果人们只想查看有问题的卡片，只需注释掉
Deck()中的第一个 for 循环即可加载所有卡片并添加两行代码以仅加载有问题的卡片卡片。
标签： java svg image-processing processing rendering