[RESOLU] Créer son avatar en PHP et SVG

par **Chabin971** » 28 mai 2014, 16:02

par contre je ne connait pas le php conceptuel que tu utilise et donc je ne peux te donner la solution que dans le langage que je connais, mais il y a peut etre quelquechose d'équivalent ??!!

Oui il doit y'avoir normallement je vais regarder ca

et si tu veux plus d'infos sur le php conceptuel je te conseille ce site ^^

Quand tu ecris ton formulaire dans la page, il faut simplement tester la valeur de l'attribut précédemment posté et s'il correspond à une option on ajoute selected a celle-ci!
ça donne:

//tout au début de ton fichier
function getOption($nomCouleur,$valeurCouleur,$postPrecedentChoix)
{
     if(strcmp($postPrecedentChoix,$valeurCouleur)==0)
           return '<option value=" '.$valeurCouleur.' " selected>'.$nomCouleur.'</option>';
     return '<option value=" '.$valeurCouleur.' ">'.$nomCouleur.'</option>';
}
//et au moment de l'affichage de ton formulaire:
echo '<form method="post" action="index.php">
           <select name="cravate">';
//a faire pour chaque couleur de ton objet:
echo getOption('marron','Maroon',$_POST['cravate']);
echo '</select></form>';

Je vais tester ca je te tiens au courant

par **chapt0011** » 28 mai 2014, 15:55

est-ce que tu connaitrais la syntaxe en javascript ? j'avais essayer mais ça ne fonctionnais pas

Non hélas je sais qu'il faut que tu execute une fonction javascript sur la propriété onChange de ton select
genre <select blablabla onChange="fonction()"><option ...>...</select>
le code javascript que je t'ai donné n'est pas une fonction mais une succession d'opération que doit inclure la fonction.
Je suis pas un as, j'aime pas le javascript et en plus bien souvent il est désactivé sur les navigateurs

est-ce que tu sais comment faire pour garder le dernier choix d'afficher au niveau des listes déroulantes ?

Oui c'est également faisable en php grâce à la propriété selected d'une option de ton select.
par contre je ne connait pas le php conceptuel que tu utilise et donc je ne peux te donner la solution que dans le langage que je connais, mais il y a peut etre quelquechose d'équivalent ??!!
Quand tu ecris ton formulaire dans la page, il faut simplement tester la valeur de l'attribut précédemment posté et s'il correspond à une option on ajoute selected a celle-ci!
ça donne:

//tout au début de ton fichier
function getOption($nomCouleur,$valeurCouleur,$postPrecedentChoix)
{
     if(strcmp($postPrecedentChoix,$valeurCouleur)==0)
           return '<option value=" '.$valeurCouleur.' " selected>'.$nomCouleur.'</option>';
     return '<option value=" '.$valeurCouleur.' ">'.$nomCouleur.'</option>';
}
//et au moment de l'affichage de ton formulaire:
echo '<form method="post" action="index.php">
           <select name="cravate">';
//a faire pour chaque couleur de ton objet:
echo getOption('marron','Maroon',$_POST['cravate']);
echo '</select></form>';

par **Chabin971** » 28 mai 2014, 15:27

Nickel

merci beaucoup pour ton aide

PS:
- est-ce que tu connaitrais la syntaxe en javascript ? j'avais essayer mais ça ne fonctionnais pas
- est-ce que tu sais comment faire pour garder le dernier choix d'afficher au niveau des listes déroulantes ? A chaque fois que je choisit une couleur et que je fait "Appliquer" l'avatar prend bien les couleurs que je lui ait demandées mais la liste retourne sur son 1er choix. Ex : une liste avec 3 couleurs : "1. bleu, 2. rouge et 3.noir " je choisi "noir" et l'applique sur mon avatar mais la liste reviens automatiquement sur bleu.

par **chapt0011** » 28 mai 2014, 14:50

Voila ton nouvel index.php :
j'ai juste transformé echo img("image.svg") en include ("image.php").

<?php
        include("std.php") ; # notre librairie dite "conceptuelle"
        
    debutPageMinimal("Avatar","avatar.css")  ;
        
        // titre
    h2(" Creez votre avatar :") ; br(); br();
     
        // début du formulaire de création d'avatar
        
        center ();
        table ();
        
        tr();
        td(); h3("Avatar"); fintd();
        fintr();
        
        tr();
        td();  include("image.php");/* L'image est ici */ fintd();
        td(); /* Suite du formulaire */  
                  echo b("Choix:"); br(); br();
                  echo ("Peau:"); 
                  form("index.php","post");
                  input_select("peau","size=\"1\"") ;
                  input_option("Maroon","marron") ;
                  input_option("PaleGoldenRod","jaune") ;
                  input_option("White","blanc") ;
                  input_option("","null") ;
                  input_select_fin() ; br(); br();
                  echo ("Yeux:"); br();
                  input_select("yeux","size=\"1\"") ;
                  input_option("DeepSkyBLue","bleu") ;
                  input_option("YellowGreen","vert") ;
                  input_option("Sienna","marron") ;
                  input_select_fin() ; br(); br();
                  echo ("T-shirt:"); br();
                  input_select("tshirt","size=\"1\"") ;
                  input_option("Gray","gris") ;
                  input_option("DodgerBlue","bleu") ;
                  input_option("Chocolate","marron") ;
                  input_select_fin() ; br(); br();
                  echo ("Cravate:"); br();
                  input_select("cravate","size=\"1\"") ;
                  input_option("Crimson","rouge") ;
                  input_option("Gold","or") ;
                  input_option("Silver","argent") ;
                  input_select_fin() ; br(); br();
                  echo ("Col:"); br();
                  input_select("col","size=\"1\"") ;
                  input_option("MediumOrchid","violet") ;
                  input_option("DarkOrange","orange") ;
                  input_option("Black","noir") ;
                  input_select_fin() ; br(); br();
                  input_submit("Appliquer") ;
                  finform();
        fintd();
        fintr();
        fintable();
        fincenter();
        ?>

  </body>

</html>

Ensuite crée le fichier image.php et colles-y toute ton image svg la où je te dit de le faire (en commentaire)

<?php
//ici le script de traitement
if(isset($_POST['cravate']))
 $coul_cravate=$_POST['cravate']; //si couleur personnalisée
else
 $coul_cravate='white'; //sinon blanc par defaut
//if ... TODO: A FAIRE POUR TOUT TES ELEMENTS

/*CODE SVG DE L'IMAGE */
// à transformer comme l'exemple suivant:
echo '<svg width="300" height="300">
    <polygon id="haut_cravate" fill=" '.$coul_cravate.' " stroke ="black" stroke-width="2" points="10,30 50,30 40,60 20,60 " />
        <polygon id="bas_cravate" fill=" '.$coul_cravate.' " stroke ="black" stroke-width="2" points="40,60 20,60 10,100 35,115 50,100" />
</svg>';
//si c'est l'attribut style="fill:couleur;" qui te fait peur je te rassure ça fonctionne aussi
echo '<svg width="300" height="300">
    <polygon id="haut_cravate" style="fill:'.$coul_cravate.';" stroke ="black" stroke-width="2" points="10,30 50,30 40,60 20,60 " />
        <polygon id="bas_cravate" style="fill:'.$coul_cravate.';" stroke ="black" stroke-width="2" points="40,60 20,60 10,100 35,115 50,100" />
</svg>';

par **Chabin971** » 28 mai 2014, 14:18

Au final j'ai encore un soucis ^^'

J'ai modifier un peu mon code. L'idée est d'avoir un avatar "vierge" au début (voir en dessous) lors du lancement de la page index et à partir de la, on peux choisir les couleurs que l'on veut pour son avatar.

vierge.png

Voila le code svg de mon image :

<svg
		   xmlns:dc="http://purl.org/dc/elements/1.1/"
		   xmlns:cc="http://creativecommons.org/ns#"
		   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
		   xmlns:svg="http://www.w3.org/2000/svg"
		   xmlns="http://www.w3.org/2000/svg"
		   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
		   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
		   width="350"
		   height="349"
		   id="svg5537"
		   version="1.1"
		   inkscape:version="0.48.4 r9939"
		   sodipodi:docname="image.svg">
		   <metadata
		   id="metadata5550">
		   <rdf:RDF>
			  <cc:Work
				 rdf:about="">
				<dc:format>image/svg+xml</dc:format>
				<dc:type
				   rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
			  </cc:Work>
		   </rdf:RDF>
		   </metadata>
		   <sodipodi:namedview
			 pagecolor="#ffffff"
			 bordercolor="#666666"
			 borderopacity="1"
			 objecttolerance="10"
			 gridtolerance="10"
			 guidetolerance="10"
			 inkscape:pageopacity="0"
			 inkscape:pageshadow="2"
			 inkscape:window-width="767"
			 inkscape:window-height="848"
			 id="namedview5548"
			 showgrid="false"
			 inkscape:zoom="0.60933961"
			 inkscape:cx="176.34349"
			 inkscape:cy="165.00446"
			 inkscape:window-x="832"
			 inkscape:window-y="24"
			 inkscape:window-maximized="0"
			 inkscape:current-layer="svg5537" />
		   <desc
			 id="desc5539">Avatar</desc>
		   <defs
			 id="defs5541">
			<g
			   id="tete">
			  <circle
				 cx="176"
				 cy="194"
				 r="130"
				 stroke="black"
				 fill="blue"
				 id="circle5544"
				 d="M 306,194 C 306,265.79702 247.79702,324 176,324 104.20298,324 46,265.79702 46,194 46,122.20298 104.20298,64 176,64 c 71.79702,0 130,58.20298 130,130 z" />
			</g>
		   <!-- Début de la création de l'avatar -->
		   </defs>
		   <!-- Peau -->
		   <path
			 sodipodi:type="arc"
			 style="fill:white;fill-opacity:0.69406391000000001;fill-rule:evenodd;stroke:#000000;stroke-width:1.44141793000000007;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-opacity:0.80365295000000003;stroke-dasharray:none;opacity:1"
			 id="peau"
			 sodipodi:cx="190.85249"
			 sodipodi:cy="183.88043"
			 sodipodi:rx="92.924431"
			 sodipodi:ry="95.06884"
			 d="m 283.77692,183.88043 a 92.924431,95.06884 0 1 1 -185.848858,0 92.924431,95.06884 0 1 1 185.848858,0 z"
			 transform="matrix(1.403424,0,0,1.3718014,-92.347035,-96.748451)"
			 inkscape:label="#peau" />
		   <!-- Oeil gauche -->
		   <path
			 sodipodi:type="arc"
			 style="fill:white;fill-opacity:1;stroke:#efbd11;stroke-width:1.00026774;stroke-miterlimit:4;stroke-opacity:0.26484022;stroke-dasharray:none"
			 id="oeilG"
			 sodipodi:cx="143.01825"
			 sodipodi:cy="107.06023"
			 sodipodi:rx="16.649469"
			 sodipodi:ry="17.903404"
			 d="m 159.66772,107.06023 a 16.649469,17.903404 0 1 1 -33.29894,0 16.649469,17.903404 0 1 1 33.29894,0 z"
			 transform="matrix(1.5188284,0,0,1.4007782,-0.20299212,-37.77583)"
			 inkscape:label="#yeux" />
			<!-- Pupille gauche -->
		   <path
			 sodipodi:type="arc"
			 style="fill:#000000;fill-opacity:1;stroke:none"
			 id="pupilleG"
			 sodipodi:cx="139.00951"
			 sodipodi:cy="110.88095"
			 sodipodi:rx="5.6155505"
			 sodipodi:ry="5.6155505"
			 d="m 144.62506,110.88095 a 5.6155505,5.6155505 0 1 1 -11.2311,0 5.6155505,5.6155505 0 1 1 11.2311,0 z"
			 transform="matrix(1.6001247,0,0,1.5880311,-5.2469634,-64.300067)"
			 inkscape:label="#pupille" />
			 <!-- Oeil droit -->
		   <path
			 sodipodi:type="arc"
			 style="fill:white;fill-opacity:1;stroke:#efbd11;stroke-width:1.00026774;stroke-miterlimit:4;stroke-opacity:0.26484022;stroke-dasharray:none"
			 id="oeilD"
			 sodipodi:cx="143.01825"
			 sodipodi:cy="107.06023"
			 sodipodi:rx="16.649469"
			 sodipodi:ry="17.903404"
			 d="m 159.66772,107.06023 a 16.649469,17.903404 0 1 1 -33.29894,0 16.649469,17.903404 0 1 1 33.29894,0 z"
			 transform="matrix(1.5188284,0,0,1.4007782,-80.191992,-38.65833)"
			 inkscape:label="#yeux" />
			 <!-- Pupille droite-->
		   <path
			 sodipodi:type="arc"
			 style="fill:#000000;fill-opacity:1;stroke:none;stroke-opacity:0.80365293999999998"
			 id="pupilleD"
			 sodipodi:cx="139.00951"
			 sodipodi:cy="110.88095"
			 sodipodi:rx="5.6155505"
			 sodipodi:ry="5.6155505"
			 d="m 144.62506,110.88095 a 5.6155505,5.6155505 0 1 1 -11.2311,0 5.6155505,5.6155505 0 1 1 11.2311,0 z"
			 transform="matrix(1.6001247,0,0,1.5880311,-85.246963,-64.300067)"
			 inkscape:label="#pupille" />
			 <!-- Tshirt -->
		   <path
			 style="fill:white;stroke:#000000;stroke-width:1.01100004000000010;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
			 d="m 47.760189,182.27438 21.040317,14.608 15.83466,10.29199 16.164554,6.308 24.08188,4.98 43.21543,1.66 33.50087,-1.45151 24.22967,-6.18448 29.03022,-7.30401 32.65898,-13.94399 16.18675,-8.99102 c -0.74326,6.45035 -3.7249,13.47381 -6.10867,20.47099 -6.54343,20.38073 -27.72227,44.29602 -28.22196,44.29602 -6.36368,6.7901 -14.23989,12.90796 -23.09221,18.592 -0.60411,0.96519 -11.44887,7.50172 -20.06175,10.91301 -7.22374,2.65878 -12.98701,4.34391 -19.10969,6.26864 l -14.01322,1.62717 -22.98338,1.83842 -16.68994,-1.78499 c -5.11309,-0.97544 -9.90906,-1.63376 -16.33521,-3.92226 -4.8345,-1.6283 -9.70753,-3.29139 -15.50478,-5.78897 l -12.4135,-6.66059 c -3.13865,-1.73147 -7.6679,-4.85355 -11.546104,-7.32457 -3.941309,-3.12329 -7.915752,-6.28918 -13.751522,-11.8482 -5.73455,-5.05673 -10.534986,-11.67031 -15.474857,-18.05151 -4.469168,-5.97149 -7.806071,-12.50912 -11.200401,-19.01804 -4.177309,-9.74537 -7.735413,-19.55955 -9.436137,-29.5801 z"
			 id="tshirt"
			 inkscape:connector-curvature="0"
			 sodipodi:nodetypes="ccccccccccccccccccccccccccc" />
			 <!-- Bas de cravate -->
		   <path
			 style="fill:white;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
			 d="m 185.985,327.248 c 15.73547,-18.51232 27.30568,-27.30568 27.30568,-27.30568 l -11.57021,-29.15692 -4.16527,-19.66934 -6.71072,-6.47932 -12.72722,0 -7.17353,3.70247 -18.74373,53.45434 4.62808,2.77685 z"
			 id="bas_cravate"
			 inkscape:connector-curvature="0"/>
			<!-- Haut de cravate -->
		   <path
			 style="fill:white;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
			 d="m 162.39041,220.28175 -9.09541,13.0573 17.23488,14.64449 7.39473,-4.20153 11.62517,0 8.03791,6.45771 11.07467,-19.46215 c 0,0 -4.66545,-11.63575 -7.621,-11.63575 -2.95555,0 -38.65095,1.13993 -38.65095,1.13993 z"
			 id="haut_cravate"
			 inkscape:connector-curvature="0"
			 sodipodi:nodetypes="cccccccsc"
			 inkscape:label="#cravate"/>
		   <!-- Col gauche -->
		   <path
			 style="fill:white;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
			 d="m 201.76163,218.75624 23.45612,-5.68637 28.74795,-7.58344 -11.03034,15.39318 -13.90223,13.4572 -13.32111,10.16172 -3.84904,2.56147 -2.82752,-16.32299 c -2.01552,-4.09821 -3.77811,-8.30482 -7.10179,-11.84239"
			 id="col_gauche"
			 inkscape:connector-curvature="0"
			 sodipodi:nodetypes="ccccccccc"
			 inkscape:label="#col"/>
		   <!-- Col droit -->
		   <path
			 style="fill:white;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
			 d="m 96.62283,212.30707 c 9.54031,3.18301 19.46731,4.43255 29.25939,6.35672 l 36.18364,1.61483 -8.86926,13.04323 -2.55044,14.52495 -9.49997,-2.74074 -19.55364,-9.91058 -14.13532,-10.75701 z"
			 id="col_droit"
			 inkscape:connector-curvature="0"
			 sodipodi:nodetypes="ccccccccc"
			 inkscape:label="#col"/>
		   <!-- bouche -->
		   <path
			 style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
			 d="m 167.30292,195.69684 4.11856,2.76909 c 7.2984,1.73982 16.33913,1.89412 20.79268,1.22451 l 9.74803,-2.01266 c 3.69991,-1.3347 7.16678,-1.97031 11.11672,-4.05512 4.11354,-3.25621 6.79585,-6.75096 10.16326,-10.13153 l 1.77334,-3.15259"
			 id="path6441"
			 inkscape:connector-curvature="0"
			 sodipodi:nodetypes="ccccccc" />
</svg>

Le problème est que je ne voit pas comment modifier les couleurs de l'image "vierge" étant donné qu'elles sont entrées à la main de couleur blanche.

Voici mon nouveau fichier index.php :

<?php
	include("std.php") ; # notre librairie dite "conceptuelle"
	
    debutPageMinimal("Avatar","avatar.css")  ;
	
	// titre
    h2(" Creez votre avatar :") ; br(); br();
     
	// début du formulaire de création d'avatar
	
	center ();
	table ();
	
	tr();
	td(); h3("Avatar"); fintd();
	fintr();
	
	tr();
	td();  echo img("image.svg");/* L'image est ici */ fintd();
	td(); /* Suite du formulaire */  
		  echo b("Choix:"); br(); br();
		  echo ("Peau:"); 
		  form("index.php","post");
		  input_select("peau","size=\"1\"") ;
		  input_option("Maroon","marron") ;
		  input_option("PaleGoldenRod","jaune") ;
		  input_option("White","blanc") ;
		  input_option("","null") ;
		  input_select_fin() ; br(); br();
		  echo ("Yeux:"); br();
		  input_select("yeux","size=\"1\"") ;
		  input_option("DeepSkyBLue","bleu") ;
		  input_option("YellowGreen","vert") ;
		  input_option("Sienna","marron") ;
		  input_select_fin() ; br(); br();
		  echo ("T-shirt:"); br();
		  input_select("tshirt","size=\"1\"") ;
	          input_option("Gray","gris") ;
		  input_option("DodgerBlue","bleu") ;
		  input_option("Chocolate","marron") ;
		  input_select_fin() ; br(); br();
		  echo ("Cravate:"); br();
		  input_select("cravate","size=\"1\"") ;
		  input_option("Crimson","rouge") ;
		  input_option("Gold","or") ;
		  input_option("Silver","argent") ;
		  input_select_fin() ; br(); br();
		  echo ("Col:"); br();
		  input_select("col","size=\"1\"") ;
		  input_option("MediumOrchid","violet") ;
		  input_option("DarkOrange","orange") ;
		  input_option("Black","noir") ;
		  input_select_fin() ; br(); br();
		  input_submit("Appliquer") ;
		  finform();
	fintd();
	fintr();
	fintable();
	fincenter();
	?>

  </body>

</html>

PS: l'index est écrit en php conceptuel, le code est le même que celui de départ, la seule différence est que j'affiche "image.svg" au lieu d'image.php car mon image est en svg. Les infos du formulaires sont bien récupérées.

Je pensais utiliser le javascript donné auparavant mais je ne sais pas ou le placer (je n'ai jamais pratiqué de javascript)

Ce qui donnerais :

[javascript]
<script>
// on récupère l'élément du haut
var haut = document.getElementById("haut_cravate");
// on modifie sa couleur de remplissage
haut.fill = "blue";

// on récupère l'élément du bas
var bas = document.getElementById("bas_cravate");
// on modifie sa couleur de remplissage
bas.fill = "blue";

// etc....
</script>
[/javascript]

Je pensais mettre ce code dans le fichier image.svg mais quand je le fait il ne reconnait plus ce fichier en tant qu'image et j'obtiens ca :

probleme.png

Help me please

par **chapt0011** » 27 mai 2014, 12:25

Attention quand même, svg c'est bien c'est beau mais tout ça c'est du html5!!
et ça pose forcément encore des problèmes de compatibilité
Voir ici

par **Chabin971** » 27 mai 2014, 12:13

Ça fonctionne nickel

Merci pour ton aide et pour toutes ces infos sur le svg

par **chapt0011** » 27 mai 2014, 09:44

Voila ta cravate rouge:
Ce n'est ni plus ni moins que du dessin à partir de points...
Inkscape te permet de générer le code ci-dessous à condition de l'utiliser comme il faut et pour des choses complexes ca peut être utile!!
mais la je l'ai fait à la mano...

<html>
<body>
<svg width="300" height="300">
    <polygon id="haut_cravate" fill="red" stroke ="black" stroke-width="2" points="10,30 50,30 40,60 20,60 " />
	<polygon id="bas_cravate" fill="red" stroke ="black" stroke-width="2" points="40,60 20,60 10,100 35,115 50,100" />
</svg>
</body>
</html>

avec javascript tu peux accéder aux attributs fill,stroke, ect... des polygon et les redéfinir

ainsi tu peux avoir la même cravate en bleu en éxécutant une fonction contenant le code suivant (éventuellement passe la couleur en paramètre de la fonction) bref regarde un peu du coté de js ça permet de faire plein de choses aussi

Code : Tout sélectionner

<script>
// on récupère l'élément du haut
var haut = document.getElementById("haut_cravate");
// on modifie sa couleur de remplissage
haut.fill = "blue";

// on récupère l'élément du bas
var bas = document.getElementById("bas_cravate");
// on modifie sa couleur de remplissage
bas.fill = "blue";
</script>

ou encore via un système de formulaire php que tu as donné plus haut -> PHP implique de recharger la page par contre :/

<html>
<body>
<svg width="300" height="300">
    <polygon id="haut_cravate" fill="<?php echo $_POST['couleur_cravate']; ?>" stroke ="black" stroke-width="2" points="10,30 50,30 40,60 20,60 " />
	<polygon id="bas_cravate" fill="<?php echo $_POST['couleur_cravate']; ?>" stroke ="black" stroke-width="2" points="40,60 20,60 10,100 35,115 50,100" />
</svg>
</body>
</html>

Et une fois que l'utilisateur a terminé ses modifications ou que tu as mis des couleurs aléatoires, c'est possible de convertir en png via des classes php je pense pour un stockage éventuel, ceci dit le plus simple dans la mesure ou il n'y a ici que les couleurs qui changent, serait de stocker les couleurs dans une base de données et ainsi tu peux les ressortir au besoin
Easy non?!

par **Chabin971** » 26 mai 2014, 22:20

jette un oeil de ce côté il y a pas mal d'infos sur la synthaxe svg
je pense que tu dois pouvoir définir un objet cravate et le colorer en css directement

Bon bah j'ai cherché mais sans succès :/ par contre j'ai beaucoup appris sur le svg

par **chapt0011** » 26 mai 2014, 16:42

jette un oeil de ce côté il y a pas mal d'infos sur la synthaxe svg
je pense que tu dois pouvoir définir un objet cravate et le colorer en css directement

par **Chabin971** » 26 mai 2014, 15:08

Rebonjour,

Je travaille sur un autre projet qui est de pouvoir personnaliser son avatar (comme sur les forums

)
J'ai donc une image de base et je dois travailler avec du svg en plus du php. Le problème est que je ne connait pas le svg (juste les bases grâce à Google ).
L'image de base est celle-ci :

base.png

et mon code php est celui-ci :

	<?php
	echo '<center>';
	echo '<table>';
	echo '<tr><td><h3>Avatar</h3></td></tr>';
	echo '<tr><td><img src="img/base.svg" alt="Avatar de base"/></td>
	<td><b>Choix :</b><br><br>
		Yeux : 
			<FORM action="image.php" method ="post">
			<SELECT name="yeux" size="1">
			<OPTION VALUE="bleu">bleu
			<OPTION VALUE="vert">vert
			<OPTION VALUE="marron"selected>marron
			</SELECT>
			</FORM><br>
		T-shirt : 
			<FORM action="image.php" method ="post">
			<SELECT name="tshirt" size="1">
			<OPTION>rose
			<OPTION>bleu
			<OPTION selected>marron
			</SELECT>
			</FORM><br>
		Cravate : 
			<FORM action="image.php" method ="post">
			<SELECT name="cravate" size="1">
			<OPTION>rouge
			<OPTION>jaune
			<OPTION selected>grise
			</SELECT>
			</FORM><br>
		Col : 
			<FORM action="image.php" method ="post">
			<SELECT name="col" size="1">
			<OPTION>violet
			<OPTION>orange
			<OPTION selected>noir
			</SELECT>
			</FORM>
	</td></tr>';
	echo '</table>';
	echo 'Acceuil <a href="index.php"> ici</a>';
	echo '</center>';
	?>

Voila ce que donne le php sous un navigateur :

avatar.png

Maintenant un problème se pose :

- Comment définir plusieurs zones précises à colorier ?

Un exemple: Si l'utilisateur choisit une cravate rouge, comment faire en sorte qu'il n'y ait que le zone de la cravate a colorier ?

p1.png

J'utilise Inkscape pour les svg (il est gratuit ^^)

Merci d'avance pour votre aide !

[RESOLU] Créer son avatar en PHP et SVG

Répondre

Étendre la vue Revue du sujet : [RESOLU] Créer son avatar en PHP et SVG

Re: Créer son avatar en PHP et SVG

Re: Créer son avatar en PHP et SVG

Re: Créer son avatar en PHP et SVG

Re: Créer son avatar en PHP et SVG

Re: Créer son avatar en PHP et SVG

Re: [RESOLU] Créer son avatar en PHP et SVG

Re: Créer son avatar en PHP et SVG

Re: Créer son avatar en PHP et SVG

Re: Créer son avatar en PHP et SVG

Re: Créer son avatar en PHP et SVG

Créer son avatar en PHP et SVG