2 votes

Pourquoi le rendu des svg est-il incliné (Processing) ?

Mon objectif est de refaire le jeu de cartes classique Freecell pour Windows Xp sur Windows 10 avec Processing 3.
Pour ce faire, j'ai téléchargé sur aquí un ensemble de fichiers svg qui ressemblent le plus à l'aspect des anciennes cartes.
Dans mon code, j'ai une classe appelée Deck qui contient un ArrayList de cartes et, lorsqu'il est construit, il initialise les cartes en leur donnant le chemin du fichier svg dont elles ont besoin et après aussi les coordonnées x et 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();
    }
  }
}

Classe de carte :

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);
  }
}

El render() de la classe Deck est appelé une fois tous les draw() boucle, avec frameRate fixé à 10.
Quoi qu'il en soit, le code fonctionne bien, le seul problème est dans la façon dont deux svg sont rendus, comme vous pouvez le voir ici : Application screenshot Pour certaines raisons, seul le 5 de bêche et le dessin intérieur de la valet de cœur sont complètement inclinés.
Cependant, lorsqu'elles sont ouvertes avec Inkscape ou n'importe quel navigateur, elles sont correctement orientées, d'où ma confusion.
J'ai essayé d'utiliser les versions originales de ces deux svg, mais ils sont toujours rendus inclinés. J'ai essayé de comparer le xml de ces deux svg, mais je n'ai pas pu comprendre ce qui pouvait causer le problème.
Il peut aussi s'agir d'un traitement, mais dans ce cas, je n'aurais aucune idée du pourquoi ni de la manière de le réparer.
Toute aide sera appréciée, merci d'avance.

EDIT
Ajout du fichier d'esquisse principal comme demandé dans les commentaires.
Notez cependant qu'il est dépourvu de la barre grise supérieure et des 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();
}

0voto

Dietrich Points 577

Je l'ai testé, et cela semble le réparer.

Dans le fichier SPADE-5.svg, aux lignes 84/85, supprimez les éléments suivants

transform="rotate(180,1744.645,-315.5025)"

HEART-11-JACK.svg, à la ligne 123/124, supprimer

transform="rotate(0.33810995,363.27095,269.89449)"

(veillez à ne pas supprimer le > )

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X