Formes de dessin (N-gons)

Je fais un petit jeu pour l'université et j'ai besoin d'ajouter différentes formes dans mon projet. Je parle de Triangle, Rectangle, Pentagone, Hexagone, Heptagon, Octagon .... n-gon. J'ai besoin de toutes les formes pour être des polygones réguliers convexes et pouvoir colorer l'intérieur. Je pense à dessiner des formes SVG, mais je ne suis pas sûr de ce que la formule devrait être donnée seulement les n-côtés de la forme à générer. S'il y a un plugin JS que je peux simplement inclure avec Bower et générer les formes, ce sera génial. Il y a aussi le problème de les colorier et ensuite de pouvoir changer la couleur avec animation, mais pas à pas.
Formes de dessin (N-gons)

Source

2017-02-22 Lexx

Voici une méthode que j'utilise pour construire des polygones. Il fournit une couleur de remplissage aléatoire. Voir si cela aide.

<!DOCTYPE html> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
    <title>Create SVG Polygons</title> 
 

 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
 
</head> 
 
<body style='padding:10px;font-family:arial'> 
 
<center> 
 
<h4>Create SVG Polygons</h4> 
 
<div style='width:90%;background-color:gainsboro;text-align:justify;padding:10px;border-radius:6px;'> 
 
Create inline svg with random circles, ellipses, polygons, and rectangles used for test environment. 
 
</div><br /> 
 
<div id="svgDiv" style='border:1px black outset'> 
 
<svg id="mySVG" /> 
 
</div><br /> 
 
Number Of Elements:<input type=text id=elemsValue size=1 value=1200 /> 
 
&nbsp;&nbsp;SVG Width:<input type=text id=widthValue size=1 value=600 /> 
 
&nbsp;&nbsp;SVG Height:<input type=text id=heightValue size=1 value=400 /> 
 
&nbsp;&nbsp;Element Sze:<input type=text id=sizeValue size=1 value=20 /> 
 
&nbsp;&nbsp;<button onClick=go()>go</button><br /> 
 
<script> 
 

 
//---button--- 
 
function go() 
 
{ 
 
\t var elems=parseInt(elemsValue.value) 
 
\t var svgWidth=parseFloat(widthValue.value) 
 
\t var svgHeight=parseFloat(heightValue.value) 
 
\t var elemSize=parseFloat(sizeValue.value) 
 
\t //---clear prevoius--- 
 
\t mySVG.removeChild(document.getElementById("globG")) 
 
\t svgGLOB(elems,svgWidth,svgHeight,elemSize) 
 

 
} 
 

 
function svgGLOB(elems,svgWidth,svgHeight,elemSize) 
 
{ 
 
\t /* ---fill empty inline SVG element--- 
 
\t \t <div id="svgDiv"><svg id="mySVG" /></div> 
 
\t */ 
 
\t var NS="http://www.w3.org/2000/svg" 
 
\t mySVG.setAttribute("width",svgWidth) 
 
\t mySVG.setAttribute("height",svgHeight) 
 
\t svgDiv.style.width=svgWidth+"px" 
 
\t svgDiv.style.height=svgHeight+"px" 
 

 
\t var globG=document.createElementNS(NS,"g") 
 
\t globG.id="globG" 
 
\t globG.setAttribute("stroke","black") 
 
\t globG.setAttribute("stroke-width",1) 
 
\t mySVG.appendChild(globG) 
 

 
\t var points=randomPoints(elems,svgWidth,svgHeight,elemSize) 
 
\t var n=points.length 
 
\t var circleCnt=0 
 
\t var ellipseCnt=0 
 
\t var rectCnt=0 
 
\t var polygonCnt=0 
 

 
\t var RandomElems=[] 
 
\t RandomElems[0]="circle" 
 
\t RandomElems[1]="rect" 
 
\t RandomElems[2]="ellipse" 
 
\t RandomElems[3]="polygon_3" 
 
\t RandomElems[4]="polygon_4" 
 
\t RandomElems[5]="polygon_5" 
 
\t RandomElems[6]="polygon_6" 
 
\t RandomElems[7]="polygon_7" 
 
\t RandomElems[8]="polygon_8" 
 
\t RandomElems[9]="polygon_9" 
 
\t RandomElems[10]="polygon_10" 
 
\t RandomElems[11]="polygon_11" 
 
\t RandomElems[12]="polygon_12" 
 

 
\t for(var k=0;k<n;k++) 
 
\t { 
 
\t \t var rand=rdm(0,12) 
 
\t \t var elemStr=RandomElems[rand] 
 

 
\t \t if(!elemStr.indexOf("_")) 
 
\t \t \t var elemSt=elemStr 
 
\t \t else 
 
\t \t \t var elemSt=elemStr.split("_")[0] 
 

 
\t \t var elem=document.createElementNS(NS,elemSt) 
 

 
\t \t if(elemSt=="circle") 
 
\t \t { 
 
\t \t \t elem.setAttribute("r",elemSize) 
 
\t \t \t elem.setAttribute("fill",rcolor()) 
 
\t \t \t elem.setAttribute("cx",points[k][0]) 
 
\t \t \t elem.setAttribute("cy",points[k][1]) 
 
\t \t \t elem.id=elemSt+(circleCnt++) 
 
\t \t } 
 
\t \t else if(elemSt=="ellipse") 
 
\t \t { 
 
\t \t \t elem.setAttribute("rx",elemSize) 
 
\t \t \t elem.setAttribute("ry",elemSize/2) 
 
\t \t \t elem.setAttribute("fill",rcolor()) 
 
\t \t \t elem.setAttribute("cx",points[k][0]) 
 
\t \t \t elem.setAttribute("cy",points[k][1]) 
 
\t \t \t elem.id=elemSt+(ellipseCnt++) 
 
\t \t } 
 
\t \t else if(elemSt=="rect") 
 
\t \t { 
 
\t \t \t elem.setAttribute("width",elemSize) 
 
\t \t \t elem.setAttribute("height",elemSize) 
 
\t \t \t elem.setAttribute("fill",rcolor()) 
 
\t \t \t elem.setAttribute("x",points[k][0]) 
 
\t \t \t elem.setAttribute("y",points[k][1]) 
 
\t \t \t elem.id=elemSt+(rectCnt++) 
 
\t \t } 
 
\t \t else if(elemSt=="polygon") 
 
\t \t { 
 
\t \t \t var pgonSides=parseInt(elemStr.split("_")[1]) 
 
\t \t \t var pgonPnts=polygon(pgonSides,elemSize,points[k][0],points[k][1]) 
 
\t \t \t elem.setAttribute("fill",rcolor()) 
 
\t \t \t elem.setAttribute("points",pgonPnts.join()) 
 
\t \t \t elem.id=elemSt+(polygonCnt++) 
 
\t \t } 
 
\t \t globG.appendChild(elem) 
 
\t } 
 

 
\t //---obtain a random whole number from a thru b--- 
 
\t function rdm(a,b) 
 
\t { 
 
\t \t return a + Math.floor(Math.random()*(b-a+1)); 
 
\t } 
 

 
\t function randomPoints(elems,svgWidth,svgHeight,elemSize) 
 
\t { 
 
\t \t //--return format:[ [x,y],[x,y],,, ] 
 
\t \t //---Generate random points--- 
 
\t \t function times(n, fn) 
 
\t \t { 
 
\t \t \t var a = [], i; 
 
\t \t \t for (i = 0; i < n; i++) { 
 
\t \t \t a.push(fn(i)); 
 
\t \t \t } 
 
\t \t \t return a; 
 
\t \t } 
 
\t \t var width=svgWidth-2*elemSize 
 
\t \t var height=svgHeight-2*elemSize 
 

 
\t \t return \t RandomPnts = times(elems, function() { return [Math.floor(width * Math.random()) + elemSize, Math.floor(height * Math.random()) + elemSize] }); 
 
\t } 
 
    //---random color--- 
 
\t function rcolor() 
 
\t { 
 
\t \t var letters = 'ABCDEF'.split(''); 
 
\t \t var color = '#'; 
 
\t \t for (var i = 0; i < 6; i++) 
 
\t \t { 
 
\t \t \t color += letters[Math.round(Math.random() * 15)]; 
 
\t \t } 
 
\t \t return color; 
 
\t } 
 
\t function polygon(vCnt,radius,centerX,centerY) 
 
\t { 
 
\t \t var myPoints=[] 
 
\t \t var polyXPts  = Array(vCnt); 
 
\t \t var polyYPts  = Array(vCnt); 
 
\t \t var vertexAngle = 360/vCnt; 
 
\t \t //---init polygon points processor--- 
 
\t \t for(var v=0; v<vCnt; v++) 
 
\t \t { 
 
\t \t \t theAngle = (v*vertexAngle)*Math.PI/180; 
 
\t \t \t polyXPts[v] = radius*Math.cos(theAngle); 
 
\t \t \t polyYPts[v] = -radius*Math.sin(theAngle); 
 
\t \t } 
 
\t \t //--note points are CCW--- 
 
\t \t for(var v=0;v<vCnt; v++) 
 
\t \t { 
 
\t \t \t var point=[centerX+polyXPts[v],centerY+polyYPts[v]] 
 
\t \t \t myPoints.push(point) 
 
\t \t } 
 
\t \t return myPoints 
 
\t } 
 
} 
 

 
document.addEventListener("onload",init(),false) 
 
function init() 
 
{ 
 

 
\t svgGLOB(1200,600,400,20) 
 

 
} 
 
</script> 
 

 
</body> 
 
</html>

Source

2017-02-22 21:10:14

savez-vous comment faire pivoter les éléments, de sorte qu'ils ne semblent pas basculés? Je peux définir 'elem.style.transform = 'rotate (' + deg + 'deg)'; elem.style.transformOrigin = '50% 50% '; ' mais comment calculer les degrés spécifiques pour chaque n-gon? – Lexx

Formes de dessin (N-gons)

Répondre

Questions connexes