Comment, avec gd, dessiner un rectangle transparent plein avec des coins arrondis.

Soyez le premier à donner votre avis sur cette source.

Snippet vu 28 658 fois - Téléchargée 16 fois

Contenu du snippet

GD ne propose pas de rectangle aux coins arrondis.
Certains proposent de croiser deux rectangles et de remplir les coins
avec des cercles.
Mais cela n'est pas utilisable avec une couleur transparente, car les parties où il y a des superpositions sont moins transparentes que les autres.
Je vous propose donc, de faire :
- la partie horizontale vraiment rectangulaire,
- puis de construire les deux flancs arrondis, ligne de 1 pixel de large
par ligne de 1 pixel de large tout en faisant varier la longueur
du segment de manière à obtenir l'arc de cercle souhaité.

Source / Exemple :


<?php
    /**

  • Comment, avec GD, dessiner un rectangle transparent plein avec des coins arrondis.
  • GD ne propose pas de rectangle aux coins arrondis.
  • Certains proposent de croiser deux rectangles et de remplir les coins
  • avec des cercles.
  • Mais cela n'est pas utilisable avec une couleur transparente,
  • car les parties où il y a des superpositions sont moins transparentes.
  • Je vous propose donc, de faire :
  • - la partie horizontale vraiment rectangulaire,
  • - puis de construire les deux flancs arrondis, ligne de 1 pixel de large
  • par ligne de 1 pixel de large tout en faisant varier la longueur
  • du segment de manière à obtenir l'arc de cercle souhaité.
  • Ce petit script fonctionne.
  • @author : Rainbow
  • /
/** Création de l'image-png de base, de couleur bleu-ciel */ header ("Content-type: image/png"); $image = imagecreatetruecolor(500,400); $ciel = imagecolorallocate($image, 230, 240, 255); imagefill($image,0,0,$ciel); /** Trait noir, pour vérifier la transparence */ $noir = imagecolorallocate($image, 0, 0, 0); imageline($image,50, 10, 300, 350, $noir); /** rectangle jaune opaque, idem */ $jaune = imagecolorallocate($image, 255, 255, 0); imagefilledrectangle($image,50, 50, 300, 100, $jaune); /** rectangle jaune un peu transparent (32/127), idem */ $jaune_alpha = imagecolorallocatealpha($image, 255, 255, 0, 32); imagefilledrectangle($image,50, 150, 300, 200, $jaune_alpha); /** Passons au choses sérieuses */ /** Pour dessiner un rectangle aux coins arrondis */ function rectangleArrondi($image, $x0, $y0, $x1, $y1, $rayon, $couleur) { /** $couleur peut-être opaque ou transparente */ /** On s'assure que le rayon n'est pas trop grand. Pour simplifier le dessin des flancs, supposons que $x0<$x1 et $y0<$y1
  • /
$largeur = $x1-$x0; if (($y1-$y0)<$largeur) { $largeur = $y1-$y0;} if ((2*$rayon)>($largeur-1)) { $rayon = floor(($largeur-1)/2);} /** On dessine la partie horizontale réellement rectangulaire */ imagefilledrectangle($image, $x0+$rayon, $y0, $x1-$rayon, $y1, $couleur); /** On dessine, ligne verticale par ligne verticale, les deux flancs arrondis */ for ($r=1;$r<=$rayon;$r++) { $reduction = round(sqrt($rayon*$rayon - $r*$r)); /** merci Pythagore */ /** flanc gauche */ imageline($image, $x0+$rayon-$r, $y0+$rayon - $reduction, $x0+$rayon-$r, $y1-$rayon + $reduction, $couleur); /** flanc droit */ imageline($image, $x1-$rayon+$r, $y0+$rayon - $reduction, $x1-$rayon+$r, $y1-$rayon + $reduction, $couleur); } } /** On utilise la fonction ci-devant, pour dessiner notre rectangle arrondi */ rectangleArrondi($image, 50, 250, 300, 300, 15, $jaune_alpha); /** On affiche à l'écran puis on libère la mémoire */ imagepng($image); imagedestroy($image); ?>

A voir également

Ajouter un commentaire

Commentaires

Messages postés
4
Date d'inscription
vendredi 23 avril 2010
Statut
Membre
Dernière intervention
22 septembre 2010

Je vois, j' ai cru que c' etais un seul triangle a afficher . THANKS.
Messages postés
58
Date d'inscription
vendredi 29 août 2003
Statut
Membre
Dernière intervention
25 octobre 2010

Le problème, il est où? Rainbow s'est amusé en affichant trois rectangles et en dernier le rectangle concerné. Joli exercice.
Messages postés
4
Date d'inscription
vendredi 23 avril 2010
Statut
Membre
Dernière intervention
22 septembre 2010

merci de votre aide. ca a marcher mais encore un petit problem. j'ai trois rectangle mis en cascade, un en haut opaque le second au milieu transparent el seul le troisieme a un coin arrondit. merci de votre part. repondez-moi please.
Messages postés
5
Date d'inscription
vendredi 10 janvier 2003
Statut
Membre
Dernière intervention
17 janvier 2011

J'ai constaté la même chose que toi en utilisant un copier-coller du code ci-dessus auquel j'avais dû enlever une étoile au début de chaque ligne.
Sachant que mon script original est identique et fonctionne, j'ai supposé que des caractères non-visibles figuraient dans le copier-coller de cette page, entrainant une erreur.
Donc pour nettoyer le texte, j'ai mis le copier-coller dans le "bloc-note" de Windows (qui est un peu brut de fonderie), j'ai enregistré pour lui faire perdre tous les caractères qu'il ne connaissait pas avec l'extension .php ... et ça marche !
Je te suggère donc de passer ce script dans un éditeur plus fruste que ton éditeur habituel pour lui faire perdre les caractères invisibles mais indésirable qu'il a récupérer sur cette page. Tu pourras ensuite le remettre sans problème dans ton éditeur.
Messages postés
58
Date d'inscription
vendredi 29 août 2003
Statut
Membre
Dernière intervention
25 octobre 2010

Pas d'erreur... Superbe script, merci.
Afficher les 6 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.