Générer une image avec des coordonnées

Je pense que vous devriez essayer d'utiliser une solution prête pour cela. À titre d'exemple: https://www.chatjs.org/docs/latest/ Graphiques / radar.html . Cela pourrait être utile.

"Comment il est capable d'utiliser le UserInput, pour visualiser le UserInput" P>

Si vous regardez le HTML, vous verrez: P>

<input type="checkbox" name="yes80" value="A" onclick="onoff(80,yes80,no80)">

dmitriy

Merci beaucoup pour votre contribution.

@jeff

Ce que je ne savais pas, c'est comment ces valeurs sont utilisées pour dessiner ce système de coordonnées. Existe-t-il une fonction PHP qui dessine une image et utilise les valeurs comme points?

@ m.dmitriy

est-il possible de rendre le radar ressemble à un système de coordonnées, avec 2 axes?

Je pense que si je défini seulement 4 étiquettes, il devrait être tiré comme ça?

merci

Vous pouvez essayer de le faire avec SVG. ( Codepen ici )

Pour être plus facile, je vais essayer d'expliquer mon idée basée sur dessins: p>

1. La zone pourpre est le conteneur SVG lui-même p> li>

2. La zone bleue est le conteneur div conteneur p> li>

3. La zone orange est un polygone symétrique par rapport au centre du conteneur Violet SVG, juste par exemple p> li>

4. Le polygone jaune est votre élément qui peut être changé par entrée p> li> ol>

   Le système SVG a le point de départ dans le coin supérieur gauche (0,0) code> comme indiqué dans fig.1 code>. Parce que vous souhaitez conserver votre silhouette dans le code> code>, les coordonnées auront la moitié de largeur code>, soit la moitié de hauteur code> p> p> p> Fondamentalement, vous aurez cette (x, y) code> coordonnées dans le sens horaire p>

   • TOP: X / 2, Entrée LI>
   • Droite: entrée, Y / 2 LI>
   • Bottom: x / 2, entrée li>
   • GAUCHE: INPUT, Y / 2 LI> ul>

     Comme vous pouvez le voir, le haut et le bas sont identiques, la différence est la ligne centrale, sur elle ou derrière elle, comme indiqué sur la figure 2. Nous n'avons pas les x code> et y code> Axis afin que nous utilisons ce que nous avons, largeur code> et hauteur code>, donc tous Les calculs seront relatifs à w code> et h code>. Comme dans fig.3 code>, droite et gauche est relatif à la ligne bleue, si l'entrée est plus petite que x / 2 code> le point sera à gauche.

     p>

     <div id="conatainer"> <!-- blue -->
       <svg id="mySvg" width="300" height="300" version = "1.1">
         <!-- perfect polygon as example -->
         <polygon points = "150,10  290,150 150,290 10,150 " fill="#ff8000" stroke = "black" stroke-width = "2"/> 
         <!-- your yellow editable polygon -->
         <polygon id="myPolygon" points = "150,20 190,150 150,250 70,150 " fill = "#ffb300" stroke = "black" stroke-width = "2"/> 
         <text x="170" y="20" fill: "white" >Y</text>
         <line x1="150" y1="0" x2="150" y2="300" stroke="black" /> <!-- y axis -->
         <text x="290" y="140" fill: "white" >X</text>
         <line x1="0" y1="150" x2="300" y2="150" stroke="black" /> <!-- x axis -->
       </svg>
     </div>
     
     <div id="controls" >
     
       <div class ="myInput">
         <label for="top">Top</label>
         <input id="top" value="20">
         <label class="warning"  for="male"> smaller than height/2</label>
       </div>
     
       <div class ="myInput">
         <label for="right">Right</label>
         <input id="right" value="190">
         <label class="warning"  for="male"> bigger than width/2</label>
       </div>
     
       <div class ="myInput">
         <label for="bottom">Bottom</label>
         <input id="bottom" value="250">
         <label class="warning" for="male"> bigger than height/2</label>
       </div>
     
       <div class ="myInput">
         <label for="left">Left</label>
         <input id="left" value="70">
         <label class="warning"  for="male">smaller than width/2</label>
       </div>
     
       <button id="newSvg"> Resize </button>
     </div>