Étude de cas d'équipe de Pim : créer des effets des textes avec le php et le gd
Voyez comment vous pouvez créer des effets graphiques sur le texte avec PHP et GD - laissez tomber les ombres, les arcs, les polices et les couleurs.
Problème
Signs et Sraphics Inc. Un-techniques 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
Fournissez aux utilisateurs le secteur de prévision
Permettez aux visiteurs de choisir la police et la couleur
Laissez ajouter l'ombre de baisse et choisir la couleur d'ombre de baisse
Laissez 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 :
//nom d'image de destination
# ';
fond de //the
imagefilledrectangle (#, 0, 0, 590, 60, # ] ]) ;
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 tout les 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 :
showTable(table) de fonction
{
mouseX = window.event.x + document.body.scrollLeft+25 ;
if(table=='background ')
{
contenu de variété = "" ;
variété y=460 ;
}
if(table=='fonts)
{
contenu de variété = "" ;
variété y=690 ;
}
if(table=='shadows)
{
contenu 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(elid de fonction, 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, # ], #, #, # ], "fonts/".$_post['fonts'], $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 d'elles. Mais ce qui une surprise - les courbes ont semblé seul parfait, mais quand nous avons ajusté les lettres au-dessus d'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 :
if($arctype)
{
# ;
if($start%2) # ;
#, $start, $l) ;
#, $start, $l) ;
}
if(!$arctype)
{
#) ;
#) ;
//making les rangées
for($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 d'enchaînement crée les décalques parfaits avec des graphiques, calcule le prix et vous 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
Employez GD pour créer des effets des textes
N'oubliez pas que vous pouvez vous créer pour posséder des fonctions pour ce que GD n'offre pas
Ne recherchez pas toujours les formules parfaites de maths. Les effets graphiques sont prévus à l'oeil humain
Polices de charge dans le serveur
Employez le Javascript et les couches cachées pour réaliser la grande flexibilité
Au sujet De l'Auteur
Le policier Handzhiev est un lotisseur aîné dans l'équipe Bulgarie de PIM
http://pimteam.net
admin@pimteam.net
Source D'Article: Messaggiamo.Com
Related:
» Seo Elite: New Seo Software!» AntiSpywareBOT
» Reverse Mobile
» Error Nuker
Webmaster obtenir le code html
Ajouter cet article sur votre site Web dès maintenant!
Webmaster envoyer vos articles
Aucune inscription requise! Remplissez le formulaire et votre article est dans le Messaggiamo.Com répertoire!
