Bogenschriften / Textildesigner

[labrar]

Hallo liebes Forum

Ich habe jetzt schon einige Tshirtdesigner ala shirtinator programmiert und war bis auf eine Ausnahme (Junggesellenabschied T Shirt Druck ? Shirts selbst gestalten & bedrucken) auch immer fürs Backend zuständig.

Mein Problem ist folgendes.

Normalerweise gebe ich dem Shopbetreiber im CMS ein Flashmodul an die Hand welches das designte Tshirt wie im eigentlichen Konfigurator aufbaut und dann einen Printjob ausführt. Der Kunde druckt das dann als PDF und kann dieses jederzeit (also auch die verwendeten Bogenschriften) als AI weiterverarbeiten.

Den Konfigurator für Shirtracer allerdings habe ich für eine Agentur gemacht welche selbst das Backend entwickelt haben.

Und das geile an diesem Backend ist, dass ich via Flash einfach nur Koordinaten in Pixeln, Rotationen und Pixelgrößen aller Objekte und vorallem auch der einzelnen Buchstaben der Effektschriften nebst Schriftfontname an ein PHP Scipt sende.

Dieses Backend baut dann gleich eine AI aus der ganzen Nummer inklusive einen Vorschaubild für den Warenkorb (was ich ansonsten ebenfalls über einen Minikonfigurator löse)

Während der Entwicklung habe ich natürlich täglich mit dem zuständigen Progger telefoniert und es sind Worte gefallen wie CVS, Smill und SVG.
Alleridings konnte ich nicht herausfinden welche dieser Möglichkeiten zum Einsatz kam, und vor allem wie.

Deshalb meine Frage an die Könner hier.

Habt ihr Lösungsansätze wie ich dieses Backend nachbauen kann?
Vielicht sogar ohne irgendwelchen Binarys welche rootrechte zur Installation benötigen?

Ach so. Und bitte keine Antworten via "Frag den Progger doch" denn das habe ich schon. Ich hab sogar Geld geboten bzw. gefragt was das Backend kosten würde. Auf die Antwort warte ich heute noch.

PS: Um nichts durcheinander zu bringen. Ich glaube smill bzw die swftools kamen zum Einsatz um vie CMS Fonts in swf umzuwandeln welche dann in den Root des Filmes geladen werden.

Wie das geht würde mich zwar auch interessieren (Also nicht das reinladen denn das habe ja ich programmiert sondern wie die Fonts PHP Seitig zu einem swf konvertiert werden)


EDIT:
via SVG gehts fast. Was aber nervt ist, dass SVG nicht die Möglichkeit bietet (oder zumindest mir nicht bekannt) einzelne Buchstaben auf vorgegebene Pixel zu strecken. Sprich es gibt keine Möglichkeit in Form von <font-height:70px;>
Oder doch?

[labrar]

Habs hinbekommen

[labrar]

So

Hier jetzt mal das Demo zum testen
Klick

Ist nur ein Demo, dass auch noch ein paar Bugs hat. Preloader gibts nicht, also einfach ein paar Sekunden warten.

Auf "neuen Text" klicken und rumprobieren.

Es wird dann eine SVG und eine PNG erzeugt.
Bei manchen Fonts (Western) gelingt mir die wieder zu SVG konvertierung noch nicht ganz. Ebenso ist bei manchen Fonts (Wie zB. Adler) die erstellte SVG dem Original näher als der Darstellung in Flash.

Aber da bin ich im Moment dran.

Wenn ich es dann habe, werde ich eine Ausführliche Beschreibung mit allen Klassen posten. Ich denke sowas kann jeder mal brauchen.

Eben alles auf AS2. Aber vieleicht findet sich ja dann jemand, der das ganze auf AS3 ummünzt

Viel Spaß

[labrar]

Das Fontproblem ist zum allergrößten Teil behoben.
Arctic macht imens Probleme und Arial Rounded ist nicht 100%ig Original.

Testet mal und sagt was dazu

[labrar]

Wie ihr seht, lassen sich jetzt auch Bilder hochladen und per SVG ausgeben.
Die erzeugte PNG ignoriert diese zwar (ist eigentlich nur convert von Imagemagick) aber das ist im Moment mein kleinstes Problem.

Im hier geposteten Demo seht ihr das mit den Bildern ja schon, obgleich die Drehungen der Bilder im SVG noch ignoriert werden.

Im Moment bin ich nämlich genau da dran und versuche jetzt via Flash eine SVG zu bauen die auch die Rotation berücksichtigt.

Bevor wir zum Code kommen.

SVG bietet zum rotieren von Shapes rotate(angle[,x,y]) an wobei die Angabe von x und y optional sind und den Drehpunkt beschreiben. Werden diese Parameter nicht mitgegeben, wäre der Defaultwert jedes Parameters 0.
Also Drehpunkt links oben.

Die in meinem Beispiel verwendeten MovieClips sind zum einen der Hauptmc (objects[und ID]) und der darin enthaltene MovieClip (holder) welcher selbst das Bild geladen hat und in seiner Positionierung - der Hälfte seiner Breite (X) und - der Hälfte seiner Höhe(y) entspricht.

Gedreht wird der Hauptmc. (Also dadurch visuell mit mittigem Drehpunkt)

Alle objects befinden sich im mc "feld" was wiederum den MovieClip "lines" beinhaltet welchen die schwarzen Linien und somit die spätere SVG Größe und SVG Inhalt beschreiben soll.

Wenn ich ein Bild nicht drehe, stimmt die Position des Bildes 100% in der SVG.
Sobald ich das Bild aber drehe ist das Bild in der SVG dann zu weit links und zu weit unten. Blöderweise nicht mal mit nachvollziehbaren Pixelunterschieden. Es scheint wie verhext zu sein.

Hier mal der Code. Vieleicht wisst ihr was zu tun ist

PHP-Code:

//Rotationswert ermittel
rota=objects[b]._rotation;
//Get Bounds anhand des späteren SVGmaßgebenden MC's feld.lines
bounder=objects[b].holder.getBounds(feld.lines);
//Berechnen der durch getBounds erstandenen Weite
weite=Number(bounder.xMax-bounder.xMin);
//Berechnen der durch getBounds erstandenen Höhe
hoehe=bounder.yMax-bounder.yMin;
//Hinzufügen zum SVG String "POSTSVG"            
POSTSVG+='<image  x="'+translate(bounder.xMin)+'" y="'+translate(bounder.yMin)+'" width="'+translate(objects[b].holder._width)+'" height="'+translate(objects[b].holder._height)+'" xlink:href="'+objects[b].pic+'" transform="rotate('+rota+','+translate(objects[b].holder._width/2)+','+translate(objects[b].holder._height/2)+')"></image>\n'; 


translate ist im übrigen nix anderes als die neuen Pixeldimensionen im Verhältnis zur Formatbreite und den DPI's auszurechnen und zurückzugeben.