英文:
Why are svg rendered tilted (Processing)?
问题
以下是您提供的内容的翻译：
我的目标是使用Processing 3在Windows 10上重新制作经典的Windows XP上的纸牌游戏FreeCell。
为此，我从这里下载了一组最接近旧纸牌外观的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(){//创建卡片并将其存储到数组中。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));}}//洗牌。//this.shuffle();//为卡片分配x和y坐标。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()循环中调用，帧率设置为10。
无论如何，代码工作得很好，唯一的问题在于两个svg的渲染方式，如您在这里所见：
由于某些原因，只有黑桃5和红桃J的内部绘图被完全倾斜。
然而，当使用Inkscape或任何浏览器打开时，它们的显示方向是正确的，因此我感到困惑。
我尝试使用这两个svg的原始版本，但它们仍然被倾斜渲染。我尝试比较这两个svg的XML，但我无法理解可能导致问题的原因。
可能是Processing的问题，但我也不知道为什么或如何修复它。
对于任何帮助，我将不胜感激，提前感谢。
编辑
根据评论的要求，添加了主sketch文件。
但请注意，它被剥去了上部的灰色条和矩形。
//全局对象。Deck deck;//全局对象。//全局变量。int edge = 2;int cardSpace = 15;int cardWidth = 100;int cardHeight = 140;//全局变量。void settings(){int w = cardWidth*8 + cardSpace*9;int h = cardHeight*5 + 32;size(w, h);}void setup(){frameRate(30);deck = new Deck(); //由于loadImage()，在此处初始化。}void draw(){background(60, 145, 50);deck.render();}
英文:
My aim is to remake the classic Freecell card game for Windows Xp on Windows 10 with Processing 3.<br>
To do so I downloaded from here a set of svg files that most resembled the old cards' look.<br>
In my code I have a class called Deck that contains an ArrayList of cards and, when constructed, it initializes the cards giving them the path for the svg file they need and after also x and y coordinates.<br>
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();}}}
Card class:
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);}}
The render() method of the class Deck is called once every draw() loop, with frameRate set to 10.<br>
Anyway, the code works fine, the only problem is in how two svg are rendered, as you can see here:
For some reasons, only the 5 of spade and the inner drawing of the jack of heart are completely tilted.<br>
However when opened with Inkscape or any browser they look correctly orientated, thus my confusion.<br>
I tried to use the original versions of those two svg, yet they are still rendered tilted. I tried to compare the xml of those two svg, but I couldn't understand what could be causing the problem.<br>
It may also be processing, but then I would have no idea why or how to fix it.<br>
Any help will be appreciated, thanks in advance.<br>
EDIT<br>
Adding main sketch file as requested in the comments.<br>
However note that it's stripped off of the upper gray bar and the rectangles.
//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();}
答案1
得分: 0
已测试，并且这似乎修复了它。
在 SPADE-5.svg 中，删除第 84/85 行上的
transform="rotate(180,1744.645,-315.5025)"
在 HEART-11-JACK.svg 中，删除第 123/124 行上的
transform="rotate(0.33810995,363.27095,269.89449)"
（确保不要删除 >）
英文:
I tested it, and this seems to fix it.
In SPADE-5.svg, on line 84/85, remove
transform="rotate(180,1744.645,-315.5025)"
HEART-11-JACK.svg, on line 123/124, remove
transform="rotate(0.33810995,363.27095,269.89449)"
(make sure not to delete the >)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论