begin process at 2012 05 27 22:21:48
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Graphique

 > COMMENT, AVEC GD, DESSINER UN RECTANGLE TRANSPARENT PLEIN AVEC DES COINS ARRONDIS.

COMMENT, AVEC GD, DESSINER UN RECTANGLE TRANSPARENT PLEIN AVEC DES COINS ARRONDIS.


 Information sur la source

Note :
10 / 10 - par 1 personne
10,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Graphique Classé sous :PHP GD, rectangle transparent, coins arrondis Niveau :Débutant Date de création :18/09/2010 Vu :3 405

Auteur : Rainbow

Ecrire un message privé
Commentaire sur cette source (6)
Ajouter un commentaire et/ou une note

 Description

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

  • <?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);
  • ?>
<?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);
?>



 Sources du même auteur

Source avec Zip IPHONE - ICÔNE D'APPEL TÉLÉPHONIQUE SUR L'ÉCRAN D'ACCUEIL
EXEMPLE DE DIAPORAMA EN PHP

 Sources de la même categorie

Source avec Zip Source avec une capture CAMEMBERT BD par dardelphi
Source avec une capture AMÉLIORATION : CAMEMBERT par asphator
GESTION DE COULEUR par manuche
Source avec Zip NAVIGATOR (+CSSDETECTOR) par xXVoxPopuliXx
MANIPULATION DES DONNÉES IPTC par shevabam

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture JEU EN PHP GD2 : JESUS RPGD2 par kyxteam
Source avec Zip Source avec une capture DIAPORAMA AVEC AJOUT ET REDIMENSIONEMENT DE PHOTOS, CRÉATION... par giloum

Commentaires et avis

Commentaire de frils le 21/09/2010 08:46:00

eh.  mais pouquoi  se fait il que  il  ya  des erreurs ?  firefox dit  que  l'image  ne peut etre  vu.  repondez-moi;

Commentaire de armenak le 22/09/2010 00:19:42

Pas d'erreur... Superbe script, merci.

Commentaire de Rainbow le 22/09/2010 00:30:20

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.

Commentaire de frils le 22/09/2010 07:16:00

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.

Commentaire de armenak le 22/09/2010 12:26:56 10/10

Le problème, il est où? Rainbow s'est amusé en affichant trois rectangles et en dernier le rectangle concerné. Joli exercice.

Commentaire de frils le 22/09/2010 13:22:47

Je  vois, j'  ai  cru que  c' etais un  seul triangle  a afficher .  THANKS.

 Ajouter un commentaire




Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,515 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales