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

Soyez le premier à donner votre avis sur cette source.

Snippet vu 29 665 fois - Téléchargée 18 fois

Commenter

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
frils Messages postés 4 Date d'inscription vendredi 23 avril 2010 Statut Membre Dernière intervention 22 septembre 2010
22 sept. 2010 à 13:22
Je vois, j' ai cru que c' etais un seul triangle a afficher . THANKS.
cs_armenak Messages postés 58 Date d'inscription vendredi 29 août 2003 Statut Membre Dernière intervention 25 octobre 2010
22 sept. 2010 à 12:26
Le problème, il est où? Rainbow s'est amusé en affichant trois rectangles et en dernier le rectangle concerné. Joli exercice.
frils Messages postés 4 Date d'inscription vendredi 23 avril 2010 Statut Membre Dernière intervention 22 septembre 2010
22 sept. 2010 à 07:16
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.
cs_Rainbow Messages postés 5 Date d'inscription vendredi 10 janvier 2003 Statut Membre Dernière intervention 17 janvier 2011
22 sept. 2010 à 00:30
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.
cs_armenak Messages postés 58 Date d'inscription vendredi 29 août 2003 Statut Membre Dernière intervention 25 octobre 2010
22 sept. 2010 à 00:19
Pas d'erreur... Superbe script, merci.
S'inscrire maintenant

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.

Du même auteur (cs_Rainbow)