Étude de cas d'équipe de PIM : Créer des effets des textes avec PHP et GD

Voir comment vous pouvez créer des effets graphiques sur le texte avec PHP et GD - laisser tomber les ombres, les arcs, les polices et les couleurs.

Problème

signs Un-techniques et Sraphics Inc. ont lancé un site Web avec l'idée de vendre des décalques en ligne. Pour réaliser de meilleurs clients ineterest le site Web a dû intégrer le constructeur en ligne de décalque. La compagnie offre également des décalques pour les véhicules qui ont apporté quelques conditions spécifiques au constructeur comme avoir les types de rotation de l'arround 4 des textes de décalque d'arcs.

Buts

• Fournir aux utilisateurs le secteur de prévision

• Permettre aux visiteurs de choisir la police et la couleur

• Laisser ajouter l'ombre de baisse et choisir la couleur d'ombre de baisse

• Laisser transformer le texte en arcs

• Calcul en temps réel

Solution

En raison du besoin d'augmenter l'intérêt de clients nous avons dû penser environ pas pour des formules parfaites de maths en montrant les graphiques dans le secteur de prévision, mais pour le peuple qui les regardera.

Car nous volonté reaveal ci-dessous, là étions peu de problèmes les appreceptions humains allants d'arround pour quelque chose « lissent parfaitement » et les figures parfaites matchematical.

Méthodologie

Nous allions employer intensivement la bibliothèque de PHP GD pour les effets des textes. Ils ont fourni changer facile des polices et des couleurs, ajouter des shawdows de baisse et tourner les textes.

Nous avons eu également pour créer les palletes de couleur que pour être évident quand le clic d'utilisateur et disparaissent quand la couleur est choisie (vous pouvez personnellement essayer les décalques créant ici). En utilisant des couches et le Javascript cachés a été censé effectuer le travail.

Le problème principal dans cet emplacement était de créer 4 types d'arcs ainsi quand l'utilisateur choisit l'un d'entre eux que le texte est arc imaginaire créé d'arround (comme dans les softwares graphiques de vecteur). Nous allions étudier les formules de Bezie et créer ces arcs avec son aide.

Exécution

L'équipe Bulgarie de PIM a eu le charger pour construire le plein constructeur en ligne fonctionnel de décalques avec les dispositifs suivants :

- Fond de décalque

Quelques utilisateurs ont été censés faire placer leurs décalques sur le fond coloré. Nous avons dû permettre au secteur de prévision d'être peints dans un fond choisi. D'abord nous avons créé l'image dans la chemise de la température :

// le nom d'image de destination
$dest='decals/« .time ().  » .jpg';
fond de //the
imagefilledrectangle ($im, 0, 0, 590, 60, $colors [$_POST [« bcolors »]]) ; 

la rangée de $colors contient la couleur disponible qui sont stockés par l'administrateur dans la base de données.

Ainsi, quand le visiteur choisit un fond elle est passée comme parametter à la fonction d'imagefilledrectangle.

- Choix de police

Les utilisateurs devraient pouvoir choisir des polices pour leurs futurs décalques. Savoir que nous ne pouvons pas considérer toutes polices sera disponible sur les ordinateurs de tout le visiteur que nous avons dû les télécharger sur l'annuaire de web server.

Nous avons permis à l'admin de contrôler les polices, ajoutant leurs noms et téléchargeant des dossiers dans le secteur d'admin.

Les polices dans la boîte choisie sont venues de la base de données. La police choisie a été passée dans l'appel au funtion d'imagettftext qui dessine sur l'image précédemment créée.

- Sélections des couleurs

Les sélections des couleurs ont dû être les palettes qui apparaissent quand l'utilisateur clique et disparaissent quand la couleur est choisie. La palette a dû regarder pendant qu'une table avec des couleurs et ces couleurs sont également définies dans

le secteur ainsi elles d'admin a dû venir dynamicly. Nous avons dû semer une fonction statique de Javascript avec le contenu dynamique.

Nous avons créé un cycle de PHP qui prenait les couleurs de la base de données et puis créait une corde pour la table de HTML. Cette table est alors passée à une fonction de Javascript qui crée les palletes avec l'aide des couches cachées :

fonction showTable (table)
{
mouseX = window.event.x + document.body.scrollLeft+25 ;
si (table=='background')
{
\"\" de content= de variété ;
variété y=460 ;
}
si (table=='fonts')
{
\"\" de content= de variété ;
variété y=690 ;
}
si (table=='shadows')
{
\"\" de content= de variété ;
variété y=810 ;
}
document.getElementById (« tabler ») .style.pixelLeft=mouseX ;
document.getElementById (« tabler ») .style.pixelTop=y ;
document.getElementById (« tabler ») .style.visibility='visible';
document.getElementById (« tabler ») .innerHTML=content ;
}

Naturellement, une fois que l'utilisateur choisissent la couleur désirée nous avons dû cacher le pallette :

setColor de fonction (elid, couleur, fromid, shc)
{
document.getElementById (elid) .value=color ;
document.getElementById (« tabler ») .style.visibility='hidden';
}

Ainsi nous avons créé les palettes intéressantes qui apparaissent et disparaissent sur un clic simple et ne prennent pas beaucoup d'espace sur l'écran.

- Baisse Shawdows

Les décalques offerts a la capacité d'avoir une ombre de baisse se sont ajoutés ainsi nous avons dû ajouter cette option au constructeur en ligne. PHP cependant non offert une fonction gentille pour cela. Nous avons créé un procédé qui dessine les textes deux fois - une fois le texte saturé par 100% original et une fois l'ombre avec un pourcentage de la couleur et du déplacement approprié. Naturellement l'ombre a été dessinée sur l'image avant le texte principal.

@imagettftext ($img, 20, $gr [$i], $x+$dx, $ys [$i] +$dy, $scolors [$shadowcolor], « polices ». $_POST [« polices »], $word [$i]) ;

- Arcs

Le problème principal est venu quand nous avons dû « tourner » les textes par des arcs. D'abord nous avons créé le funtion parfait de Bezie qui pour dessiner les courbes et ajuster la lettre au-dessus de elles. Mais ce qui une surprise - les courbes ont semblé seul parfait, mais quand nous avons ajusté les lettres au-dessus de elles elles ont semblé rugueuses.

Après avoir étudié ce problème nous nous sommes rendus compte que la résolution approximative d'écran et l'incapacité à l'antialise les images ne nous permettraient pas de créer les arcs gentils. Nous nous tenions contre le problème insoluble.

Nous avons décidé de créer peu d'arcs avec un logiciel graphique (CorelDraw) et de voir ce qui pourrait être erroné.

Nous avons noté que les courbes de Corel semblaient grandes après qu'elles soient manuellement ajustées. Cependant vous ne pouvez pas simplement laisser le programme pour créer les courbes parfaites automaticly. Un oeil humain était nécessaire pour juger quand une courbe regarde la droite et quand pas.

Nous avons obtenu une direction totalement différente. Il n'y avait pas une fonction universelle pour nous aider. La solution que nous avons trouvée était « manuellement » ajustent chaque lettre. Nous avons créé un procédé avec les cas qui ajustaient chaque lettre sur l'endroit approprié et avec la rotation appropriée selon de quelle longueur était le texte. Cela a fonctionné !

Nous avons créé 2 rangées pour chaque type d'arc - une rangée avec les positions et une rangée avec les rotations.

Le repos était simple :

si ($arctype)
{
$start= (35-$l) /2 ;
si ($start%2) $start+=1 ;
$gr=array_slice ($gr, $start, $l) ;
$ys=array_slice ($ys, $start, $l) ;
}
si (! $arctype)
{
$ys=array () ;
$gr=array () ;
//making les rangées
pour ($i=0 ; $i

Vous pouvez aller sur l'emplacement des atec et essayer les arcs que nous avons réalisés (http://atecsigns.com/decal/step_1.php).

Résultats

Maintenant Un-technique a chanté le constructeur de Web crée les décalques parfaits avec des graphiques, calcule le prix et te permet d'ajouter les décalques à votre caddie et chgeckout (le logiciel de caddie est également créé par l'équipe Bulgarie de PIM).

Le constructeur permet au visiteur de créer les décalques désirés avec n'importe quels couleur, ombre lâchée, fond et forme, de les visionner et de calculer préalablement le coût pour différentes tailles et quantités.

Le site Web et le constructeur ont été favorisés avec la compagnie massive de publicité à la radio. À ce moment-là c'était le seul constructeur de décalque qui a laissé créer des arcs d'arround des textes.

Conclusions

• Employer GD pour créer des effets des textes

• Ne pas oublier que vous pouvez vous créer pour posséder des fonctions pour ce que GD n'offre pas

• Ne pas rechercher toujours les formules parfaites de maths. Les effets graphiques sont prévus à l'oeil humain

• Polices de charge dans le serveur

• Employer le Javascript et les couches cachées pour réaliser la grande flexibilité