Français
Français
En PHP, nous pouvons manipuler des images via la bibliothèque GD, et la fonction ImageFildRectangle () est une fonction utilisée dans la bibliothèque GD pour dessiner des zones rectangulaires. Il peut non seulement dessiner des rectangles, mais également être utilisé pour fabriquer des boutons graphiques simples. En combinant différentes couleurs et formes, des éléments d'interface tels que des boutons, des arrière-plans, etc. peuvent être générés.
Cet article expliquera comment utiliser la fonction ImageFildRectangle () pour créer un bouton graphique simple et montrer comment générer des images via un code PHP.
Tout d'abord, assurez-vous que la bibliothèque GD est activée dans votre environnement PHP. Vous pouvez vérifier si la bibliothèque GD est activée en suivant le code suivant:
<span><span><span class="hljs-meta"><?php</span></span><span>
</span><span><span class="hljs-keyword">if</span></span><span> (</span><span><span class="hljs-title function_ invoke__">function_exists</span></span><span>(</span><span><span class="hljs-string">'gd_info'</span></span><span>)) {
</span><span><span class="hljs-keyword">echo</span></span><span> </span><span><span class="hljs-string">'GDLa bibliothèque est activée'</span></span><span>;
} </span><span><span class="hljs-keyword">else</span></span><span> {
</span><span><span class="hljs-keyword">echo</span></span><span> </span><span><span class="hljs-string">'GDBibliothèque non activée'</span></span><span>;
}
</span><span><span class="hljs-meta">?></span></span><span>
</span></span>Si le message "GD Library est activé" est renvoyé, cela signifie que vous pouvez continuer à écrire le code de génération d'images. Si la bibliothèque GD n'est pas activée, vous devez l'activer dans php.ini ou choisir d'inclure la bibliothèque GD lors de l'installation de PHP.
Utilisez ImageFildRectangle () pour dessiner un rectangle et sélectionner différentes couleurs d'arrière-plan et couleurs de bordure en même temps pour créer un bouton simple. Nous pouvons également ajouter du texte au rectangle pour rendre les boutons plus interactifs.
Voici un exemple complet de code pour créer un bouton graphique à l'aide d' imageFildRectangle () :
<span><span><span class="hljs-meta"><?php</span></span><span>
</span><span><span class="hljs-comment">// Créer une vraie image couleur</span></span><span>
</span><span><span class="hljs-variable">$image</span></span><span> = </span><span><span class="hljs-title function_ invoke__">imagecreatetruecolor</span></span><span>(</span><span><span class="hljs-number">200</span></span><span>, </span><span><span class="hljs-number">50</span></span><span>);
</span><span><span class="hljs-comment">// Définir la couleur d'arrière-plan</span></span><span>
</span><span><span class="hljs-variable">$bgColor</span></span><span> = </span><span><span class="hljs-title function_ invoke__">imagecolorallocate</span></span><span>(</span><span><span class="hljs-variable">$image</span></span><span>, </span><span><span class="hljs-number">0</span></span><span>, </span><span><span class="hljs-number">0</span></span><span>, </span><span><span class="hljs-number">255</span></span><span>); </span><span><span class="hljs-comment">// bleu</span></span><span>
</span><span><span class="hljs-title function_ invoke__">imagefill</span></span><span>(</span><span><span class="hljs-variable">$image</span></span><span>, </span><span><span class="hljs-number">0</span></span><span>, </span><span><span class="hljs-number">0</span></span><span>, </span><span><span class="hljs-variable">$bgColor</span></span><span>);
</span><span><span class="hljs-comment">// Définir la couleur du bouton</span></span><span>
</span><span><span class="hljs-variable">$buttonColor</span></span><span> = </span><span><span class="hljs-title function_ invoke__">imagecolorallocate</span></span><span>(</span><span><span class="hljs-variable">$image</span></span><span>, </span><span><span class="hljs-number">0</span></span><span>, </span><span><span class="hljs-number">255</span></span><span>, </span><span><span class="hljs-number">0</span></span><span>); </span><span><span class="hljs-comment">// vert</span></span><span>
</span><span><span class="hljs-comment">// Dessiner un bouton rectangulaire</span></span><span>
</span><span><span class="hljs-title function_ invoke__">imagefilledrectangle</span></span><span>(</span><span><span class="hljs-variable">$image</span></span><span>, </span><span><span class="hljs-number">10</span></span><span>, </span><span><span class="hljs-number">10</span></span><span>, </span><span><span class="hljs-number">190</span></span><span>, </span><span><span class="hljs-number">40</span></span><span>, </span><span><span class="hljs-variable">$buttonColor</span></span><span>);
</span><span><span class="hljs-comment">// Définir la couleur du texte</span></span><span>
</span><span><span class="hljs-variable">$textColor</span></span><span> = </span><span><span class="hljs-title function_ invoke__">imagecolorallocate</span></span><span>(</span><span><span class="hljs-variable">$image</span></span><span>, </span><span><span class="hljs-number">255</span></span><span>, </span><span><span class="hljs-number">255</span></span><span>, </span><span><span class="hljs-number">255</span></span><span>); </span><span><span class="hljs-comment">// Blanc</span></span><span>
</span><span><span class="hljs-comment">// Ajouter du texte au bouton</span></span><span>
</span><span><span class="hljs-title function_ invoke__">imagestring</span></span><span>(</span><span><span class="hljs-variable">$image</span></span><span>, </span><span><span class="hljs-number">5</span></span><span>, </span><span><span class="hljs-number">70</span></span><span>, </span><span><span class="hljs-number">15</span></span><span>, </span><span><span class="hljs-string">'Cliquez ici'</span></span><span>, </span><span><span class="hljs-variable">$textColor</span></span><span>);
</span><span><span class="hljs-comment">// Image de sortie au navigateur</span></span><span>
</span><span><span class="hljs-title function_ invoke__">header</span></span><span>(</span><span><span class="hljs-string">'Content-Type: image/png'</span></span><span>);
</span><span><span class="hljs-title function_ invoke__">imagepng</span></span><span>(</span><span><span class="hljs-variable">$image</span></span><span>);
</span><span><span class="hljs-comment">// Nettoyez la mémoire</span></span><span>
</span><span><span class="hljs-title function_ invoke__">imagedestroy</span></span><span>(</span><span><span class="hljs-variable">$image</span></span><span>);
</span><span><span class="hljs-meta">?></span></span><span>
</span></span>Créer une ressource d'image : ImageCreateTrueColor () crée une image de pixels 200x50, qui servira de toile du bouton.
Définir la couleur d'arrière-plan : nous utilisons ImageColorAllocate () pour définir la couleur d'arrière-plan de l'image, qui est définie sur bleu ici (RGB: 0, 0, 255). Utilisez ensuite la fonction ImageFill () pour remplir l'arrière-plan.
Rectangle du bouton dessiner : dessiner un rectangle vert via ImageFildRectangle () , qui servira de corps du bouton. Les coordonnées du rectangle vont de (10, 10) à (190, 40), c'est-à-dire la coordonnée du coin supérieur gauche et la coordonnée du coin inférieur droit.
Ajouter un texte du bouton : ajouter du texte au bouton via la fonction ImageString () . Nous avons sélectionné le texte blanc et l'avons centré.
Image de sortie : En-tête () est utilisé pour définir le type MIME de l'image, ImagePng () sortit l'image. Enfin, utilisez iMageDestroy () pour nettoyer la mémoire pour éviter les fuites de mémoire.
Ce bouton simple peut être amélioré et personnalisé au besoin:
Border : Vous pouvez ajouter une bordure au bouton via la fonction ImageRectangle () pour rendre le bouton plus évident.
Taille du bouton : Selon les besoins réels, vous pouvez modifier la taille du rectangle et ajuster la largeur et le rapport de hauteur du bouton.
Contenu dynamique : ImageString () peut modifier le texte sur le bouton et même utiliser ImageTtFText () pour utiliser la police TrueType pour obtenir des styles de texte plus riches.
Effet de gradient : utilisez d'autres fonctions de la bibliothèque GD (telles que ImageFildPolygon () ) pour obtenir un fond de gradient, un rectangle arrondi et d'autres effets pour améliorer l'effet visuel du bouton.
Cet article décrit comment créer un bouton graphique simple via la fonction ImageFildRectangle () dans PHP. Bien que ce bouton n'ait pas le style et l'interactivité complexes dans HTML et CSS, il fournit un moyen simple et efficace de générer des images dynamiquement via PHP. Avec une personnalisation et des améliorations supplémentaires, vous pouvez faire des boutons plus personnalisés et même ajouter des éléments graphiques à votre site Web.
