Zeichnen Formen (N-gons)

Ich mache ein kleines Spiel für die Universität und ich muss verschiedene Formen in meinem Projekt hinzufügen. Ich spreche über Dreieck, Rechteck, Pentagon, Hexagon, Siebeneck, Octagon .... n-gon. Ich brauche alle Formen, um konvexe regelmäßige Polygone zu sein und das Innere zu färben. Ich denke über das Zeichnen von SVG-Formen nach, aber ich bin mir nicht sicher, wie die Formel nur die N-Seiten der zu erzeugenden Form erhalten soll. Wenn es ein JS-Plugin gibt, das ich einfach mit Bower einbinden und die Shapes generieren kann, wird das großartig. Es gibt auch das Problem, sie zu färben und danach die Farbe mit Animation zu ändern, aber Schritt für Schritt.
Zeichnen Formen (N-gons)

Quelle

2017-02-22 Lexx

Unten ist eine Methode, die ich zum Erstellen von Polygonen verwenden. Es bietet eine zufällige Füllfarbe. Sehen Sie, ob das hilft.

<!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>

Quelle

2017-02-22 21:10:14

wissen Sie, wie die Elemente zu drehen, so dass sie nicht gekippt erscheinen? Ich kann 'elem.style.transform = 'drehen (' + deg + 'deg)'; elem.style.transformOrigin = '50% 50% '; ' aber wie berechnet man die spezifischen Grade für jedes n-gon? – Lexx

Zeichnen Formen (N-gons)

Antwort

Verwandte Themen