Sehen Sie, wie Sie können grafische Effekte auf den Text mit PHP und GD - Schatten, Bogen, Schriftarten und Farben.


Problem


A-TEC Zeichen und Sraphics Inc. hat eine Website mit der Idee zu verkaufen Aufkleber online. Um eine bessere Kunden ineterest hatte der Website zu integrieren Online-Aufkleber-Builder. Das Unternehmen bietet auch Aufkleber für Fahrzeuge der brachte einige spezifische Anforderungen an die Erbauer wie die Aufkleber mit Text drehen rund um 4 Arten von Bögen.


Ziele

• Bieten Sie den Nutzern mit Vorschau-Bereich
  
  
• Lassen Sie die Besucher zu wählen, Schriftart und Farbe
  
  
• Die es erlauben, Drop Shadow und der Auswahl der Drop Shadow Farbe
  
  
• Lassen Sie den Text in Kreisbögen
  
  
• Real-Time-Berechnung
  
  

Lösung


Aufgrund der Notwendigkeit einer Steigerung der Kunden Interesse mussten wir denken nicht für die perfekte mathematische Formeln beim Anzeigen der Grafiken in der Vorschau-Bereich, sondern auch für den Menschen, wird sich mit ihnen.


Wie werden wir reaveal unten gab es einige Probleme gehen rund um den menschlichen appreceptions für etwas "perfekt glatt" und die matchematical perfekte Zahlen.


Methodik


Wir würden ausgiebig nutzen PHP-GD-Library für die Text-Effekte. Es bot sich verändernden leicht von Schriftarten und Farben, das Hinzufügen Drop shawdows und drehen Sie den Texten.


Wir hatten auch zu schaffen Palettenheben die Farbe zu erscheinen, wenn User klicken und verschwinden, wenn Farbe ausgewählt wird (Sie können persönlich versuchen die Aufkleber schaffen hier). Verwenden von versteckten Schichten und javascript war, sollte seine Arbeit tun.


Das größte Problem auf dieser Site war die Schaffung 4 Arten von Bögen, wenn der Anwender wählt eine von ihnen den Text erstellt wird rund um imaginären Bogen (wie in den Vektor grafische Software). Wir fuhren zu studieren Bezie-Formeln erstellen und diese mit ihren Bögen helfen.


Die Umsetzung


Bulgarien PIM-Team hatte die Aufgabe, zu bauen den vollen Funktionsumfang Online-Aufkleber-Builder mit den folgenden Features:


-- Dekor Hintergrund


Einige Benutzer hatten, dass sie ihre Aufkleber auf farbigem Hintergrund. Wir hatten damit die Vorschau-Bereich werden in einem gemalten Hintergrund ausgewählt. Erstens haben wir das Bild in temporären Ordner:

  / / Der Name des Ziel Bild 

  $ dest = 'Aufkleber /'. Zeit ().'. jpg '; 



  / / Hintergrund 

  imagefilledrectangle ($ im, 0, 0, 590, 60, $ farben [$ _POST [ 'bcolors']]); 

$ Farben Array enthält die verfügbaren Farbe gespeichert sind durch den Administrator in der Datenbank.


So, wenn der Besucher wählt einen Hintergrund ist vergangen, als parametter zu imagefilledrectangle Funktion.


-- Font-Auswahl


Die Nutzer sollten die Möglichkeit haben, wählen Sie Schriftarten für ihre Zukunft Aufkleber. Zu wissen, dass wir nicht alle die Schriftarten zur Verfügung stehen wird auf allen Computern Besucher hatten wir zum Hochladen von ihnen auf dem Web-Server-Verzeichnis.


Wir dürfen den Admin zur Verwaltung der Schriftarten, deren Namen hinzufügen und das Hochladen von Dateien im Admin-Bereich.


Die Schriftarten in der SELECT-Box kam aus der Datenbank. Ausgewählte Schrift wurde beim Aufruf der Funktion imagettftext ist der Rückgriff auf die zuvor erstellte Bild.


-- Farbenvorwähleren


Die Farbenvorwähleren musste ein Paletten angezeigt, wenn der Benutzer klickt und verschwinden, wenn Farbe ausgewählt ist. Die Palette musste aussehen, als eine Tabelle mit diesen Farben und Farben sind auch in der


Admin-Bereich, so mussten sie sich dynamisch. Wir mussten Saatgut einer statischen Javascript-Funktion mit dynamischen Inhalten.


Wir haben ein PHP-Zyklus war die Einnahme der Farben aus der Datenbank zu schaffen und dann eine Zeichenfolge für die HTML-Tabelle. Diese Tabelle wird dann an eine JavaScript-Funktion, welche die Palettenheben schafft mit Hilfe von verborgenen Schichten:

  Funktion showTable (Tabelle) 

  ( 

  mouseX = window.event.x + document.body.scrollLeft +25; 



  if (Tabelle == "Hintergrund") 

  ( 

  var content = ""; 

  var y = 460; 

  ) 



  if (Tabelle == "Schriftarten") 

  ( 

  var content = ""; 

  var y = 690; 

  ) 



  if (Tabelle == 'Schatten') 

  ( 

  var content = ""; 

  var y = 810; 

  ) 



  document.getElementById ( 'tabler'). style.pixelLeft = mouseX; 

  document.getElementById ( 'tabler'). style.pixelTop = y; 

  document.getElementById ( 'tabler'). style.visibility = 'visible'; 

  document.getElementById ( 'tabler'). innerHTML = Inhalt; 

  ) 

Natürlich, sobald der Benutzer die gewünschte Farbe hatten wir um die Palette:

  Funktion setColor (elid, Farbe, fromid, SHC) 

  ( 



  document.getElementById (elid). value = color; 

  document.getElementById ( 'tabler'). style.visibility = 'hidden'; 



  ) 

So haben wir die Paletten nett erscheinen und verschwinden in einem einzigen Klick und nicht viel Platz auf dem Bildschirm.


-- Drop Shawdows


Die Aufkleber angeboten hat die Fähigkeit haben zu einem Rückgang Schatten hinzugefügt, so hatten wir, um diese Möglichkeit der Online-Builder. PHP jedoch nicht angeboten, eine nette Funktion für das. Wir haben ein Verfahren, das macht die Texte zweimal - einmal den ursprünglichen 100% gesättigten Text und einmal die Schatten mit einem Anteil an der entsprechenden Farbe und Vertreibung. Natürlich war der Schatten ziehen auf das Bild vor dem Haupt-Text.

  @ imagettftext ($ img, 20, $ gr [$ i], $ x + $ dx, $ ys [$ i] + $ dy, $ scolors [$ shadowcolor], "Schriftarten /".$_ POST [ 'Schriftarten'], $ word [$ i]); 

-- Arcs


Das größte Problem war, wenn wir mussten "drehen" die Texte durch Lichtbögen. Zuerst haben wir die perfekte Funktion der Bezie zu ziehen die Kurven und passen Sie das Schreiben über ihnen. Aber was für eine Überraschung - der perfekte Kurven sah allein, aber wenn wir bereinigt die Buchstaben über ihnen schienen sie rau sein.


Nach dem Studium dieses Problem, das wir erkannt, dass die grobe Bildschirmauflösung und die Behinderung zu antialise die Bilder würden nicht zulassen, dass uns zu schaffen schöne Bögen. Wir standen vor unlösbare Problem.


Wir beschlossen, einige Bögen mit einer grafischen Software (CorelDraw) und zu sehen, was falsch sein könnte.


Wir haben festgestellt, dass Corel die Kurven waren auf der Suche nach großen sie sind manuell einstellbar. Allerdings können Sie nicht nur das Programm verlassen zu schaffen perfekte Kurven automatisch. Eine menschliche Auge war notwendig, um zu entscheiden, wenn eine Kurve rechts aussieht und wann nicht.


Wir haben eine ganz andere Richtung. Es gab nicht eine universelle Funktion, die uns helfen. Die Lösung, die wir gefunden wurde auf "manuell" anpassen, jeder Brief. Wir haben ein Verfahren mit Fällen waren die Anpassung der einzelnen Buchstaben auf die entsprechende Stelle und mit entsprechender Rotation je nachdem, wie lange war der Text. Es funktionierte!


Wir haben 2 Arrays für jede Art Bogen - ein Array mit den Positionen und ein Array mit den Rotationen.


Der Rest war einfach:

  if ($ arctype) 

  ( 

  $ start = (35 - $ l) / 2; 

  if ($ start% 2) $ start + = 1; 

  $ gr = array_slice ($ g, $ start, $ l); 

  $ ys = array_slice ($ ys, $ start, $ l); 

  ) 



  if (! $ arctype) 

  ( 

  $ ys = array (); 

  $ gr = array (); 

  / / die Arrays 

  for ($ i = 0; $ i 

Sie können auf ATEC's Website und versuchen wir die Bögen erreicht (http://atecsigns.com/decal/step_1.php).


Ergebnisse


Jetzt A-TEC Sings's Web Builder schafft perfekte Aufkleber mit Grafiken, berechnet den Preis und Sie können die Aufkleber auf Ihrem Warenkorb und chgeckout (die Warenkorb-Software wird auch von PIM-Team Bulgarien).


Der Baumeister ermöglicht es dem Besucher, um die gewünschten Aufkleber mit jeder Farbe, Schatten fallen gelassen, Hintergründe und Form, um eine Vorschau und die Berechnung der Kosten für die verschiedenen Größen und Mengen.


Die Website-Builder und gefördert wurden mit massiven Radio-Werbung. Zu diesem Zeitpunkt war es die einzige Aufkleber-Builder erlaubt das Erstellen von Texten rund um Bögen.


Schlussfolgerungen

• Verwenden Sie zum Erstellen GD Texteffekte
  
  
• Vergessen Sie nicht, dass können Sie Ihre eigenen Funktionen für das, was GD nicht bieten
  
  
• Nicht immer Suche nach mathematischen Formeln perfekt. Die grafische Effekte sind für das menschliche Auge
  
  
• Laden Sie Schriftarten auf dem Server
  
  
• Verwenden Sie Javascript und verborgenen Schichten zu erreichen, große Flexibilität
  
  

Bobby Handzhiev ist ein Senior Developer im PIM-Team Bulgarien

http://pimteam.net

admin@pimteam.net