Flip x y Positionen

Question

Für mein Spiel, mein Server Objekte API dient alle Informationen für Spielobjekte/Artikel als JSON.

Meine Objekte hat Richtungen. Richtung System funktioniert mit Spiegeln: Wenn Sie Richtung 6 umdrehen, erhalten Sie Richtung 0. Jedes Objekt hat Schichten. Jede Schicht hat eine Bild und seine vordefiniertenx, y (top, left in px) Position, so dass das Objekt zusammengebaut werden kann.

Also ich möchte an den Client Objekte senden, die Alerdy umgedreht sind. Wenn ich Richtung haben 6, und die Client-Anforderung ist Richtung 0, wird mein Server Flip jeder Schicht Bilder und x,yKoordinatender Richtung so kann das Objekt korrekt MIT UMGEKEHRT Bilder zusammengesetzt werden und die Client hat nicht alles zu spiegeln, nur um das Objekt mit den gegebenen x,y Koordinaten für jede Schicht zu montieren.

Spiegeln von Bildern ist in Ordnung, ich habe es getan und ich habe keine Probleme. Aber ich weiß nicht, was ich tun soll, damit die X, Y-Koordinaten mit den umgedrehten Ebenenbildern arbeiten und es nicht richtig zeichnet.

Beispiel:

Unflipped Schicht Info:

direction: 6, 
base64ImageURL: [b64 string], 
x: 42, 
y: 16 

Flipped Schicht info sein sollte:

direction: 0, 
base64ImageURL: [b64 string flipped], 
x: ??, 
y: ?? 

Ein weiteres Beispiel:

Zum Beispiel habe ich Schichten auf meinem Objekt: Schicht 1, 2 und 3 Richtung 0 das Ergebnis Richtung Spiegeln ist 6. So habe ich diese in Richtung 6:

{ 
    Layer1: {image: "[b64 image]", x:32, y:20}, 
    Layer2: {image: "[b64 image]", x:50, y:45}, 
    Layer3: {image: "[b64 image]", x:10, y:65} 
} 

Wenn ich also jede Schicht Bild Flip die x, y-Positionen sollten auch verändert werden, sonst Schichten nicht richtig zusammengesetzt ein Richtung 0 info Objekt zu haben. Aber was soll ich mit der x & y machen? Welche Operation?

Answer 1

Ich bekomme nicht genau, wenn Sie das Bild spiegeln oder transponieren möchten. Das .scale(-1,1) sollte das Bild über seine Y-Achse spiegeln.

Fügen Sie einfach diese CSS zu Ihrem Bildklasse:

.flipped { 
    transform: scale(-1, 1); 
    -moz-transform: scale(-1, 1); 
    -webkit-transform: scale(-1, 1); 
    -o-transform: scale(-1, 1); 
    -khtml-transform: scale(-1, 1); 
    -ms-transform: scale(-1, 1); 
} 

Oder von Ihrem Code geht, habe ich eine Ahnung haben, dass dies funktionieren könnte:

context.scale(-1, 1); 
context.drawImage(image, image.width, 0); 

Entfernen der - Zeichen von image.width