隨機放置svg多邊形

我有一個svg多邊形，我想複製它們n次動態。所以我面臨的問題是當我複製它們時，我應該如何複製這些點。而不是硬編碼數組中的點，我希望它們動態生成。請幫我隨機放置svg多邊形

$(document).ready(function() { 
 
    var polyarray= { 
 
    "polyobj": [{ 
 
     "id": 0, 
 
     "name": 'Poly', 
 
     "points":'20,10 30,30 30,20', 
 
     "color":'#ed078d' 
 
    },{ 
 
     "id": 1, 
 
     "name": 'Poly1', 
 
     "points":'20,50 10,50 30,60', 
 
     "color": '#d71f39' 
 
    },{ 
 
     "id": 2, 
 
     "name": 'Poly2', 
 
     "points":'60,10 70,30 80,20', 
 
     "color":'#ed4a39' 
 
    },{ 
 
     "id": 3, 
 
     "name": 'Poly3', 
 
     "points":'40,80 60,90,60,100', 
 
     "color": '#f78d37' 
 
    },{ 
 
     "id": 4, 
 
     "name": 'Poly4', 
 
     "points":'50,50 50,60 80,50', 
 
     "color": '#c52031' 
 
    }] 
 
    } 
 

 
    for (i = 0; i < polyarray.polyobj.length; i++) { 
 
    var color = polyarray.polyobj[i].color; 
 
       
 
    var nowCloned = $("#main-0").clone(); 
 
     
 
    nowCloned[0].id = "main-"+(i); 
 
    var nc = "clip"+(i+1); 
 

 
    var fnow = nowCloned.find('polygon') 
 
     fnow.attr("id",nc); 
 
     fnow.css({"fill":color}); 
 
     fnow.attr("points",polyarray.polyobj[i].points);  
 

 
    nowCloned.appendTo("#Layer_1");   
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<svg id="Layer_1" class="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 324.61 150.83"> 
 
    <g id="main-0" style="position:absolute; top:-899px;"> 
 
    <polygon points="" id="poly" /> 
 
    </g> 
 
</svg>

來源

2016-07-27 Anusha Sajeendran

請包括jQuery的代碼片段 – Arnauld

如果它只是用於顯示和形狀將是相同的，只是位置是隨機的，你可以複製同樣的一個隨機變換。 – Ian

你可以這樣做：

function createNewPolyPoint(offset) { 
       var pageHeight = $(window).height() - offset, 
        pageWidth = $(window).width() - offset, 
        randomX = Math.floor(Math.random() * pageHeight), 
        randomY = Math.floor(Math.random() * pageWidth); 
       return [randomX, randomY]; 
      }

你可以得到3套隨機點你想畫每一個聚，之後將它們添加到您的追加前的多晶陣列結構。

來源

2016-07-27 11:54:33

您可以存儲要複製到defs元素中的多邊形。通過使用邊界框和轉換屬性，每個克隆的元素都可以位於您希望的位置。請參見下面的例子：

<!DOCTYPE HTML> 
 

 
<html> 
 

 
<head> 
 
    <title>Replicate Polygons</title> 
 
</head> 
 

 
<body onload=placePolys()> 
 
<svg id=mySVG width=500 height=500> 
 
<defs id=myClones> 
 
    <polygon id="poly1" points="20,50 10,50 30,60" fill="#ed078d" /> 
 
    <polygon id="poly2" points="60,10 70,30 80,20" fill="#d71f39" /> 
 
    <polygon id="poly3" points="40,80 60,90,60,100" fill="#f78d37" /> 
 
    <polygon id="poly4" points="50,50 50,60 80,50" fill="#c52031" /> 
 
</defs> 
 
</svg> 
 

 

 
</body> 
 
<script> 
 
var locArray=[] 
 
locArray[0]=["poly2",120,60] 
 
locArray[1]=["poly2",60,50] 
 
locArray[2]=["poly3",200,90] 
 
locArray[3]=["poly4",320,340] 
 
locArray[4]=["poly1",400,100] 
 
locArray[5]=["poly3",100,120] 
 
locArray[6]=["poly1",440,50] 
 
locArray[7]=["poly4",120,300] 
 
locArray[8]=["poly4",440,440] 
 
locArray[9]=["poly3",100,300] 
 
locArray[10]=["poly3",450,300] 
 

 
function placePolys() 
 
{ 
 
    for(var k=0;k<locArray.length;k++) 
 
    { 
 
     var loc=locArray[k] 
 
     var cloneMe=loc[0] 
 
     var clone=document.getElementById(cloneMe).cloneNode(true) 
 
     clone.setAttribute("id","clone"+k) 
 
     var x=loc[1] 
 
     var y=loc[2] 
 
     mySVG.appendChild(clone) 
 
     var bb=clone.getBBox() 
 
     var bbx=bb.x 
 
     var bby=bb.y 
 
     var bbw=bb.width 
 
     var bbh=bb.height 
 
     var cx=bbx+.5*bbw 
 
     var cy=bby+.5*bbh 
 
     var transX=x-cx 
 
     var transY=y-cy 
 
     clone.setAttribute("transform","translate("+transX+" "+transY+")") 
 
    } 
 
} 
 

 
</script> 
 

 
</html>

來源

2016-07-27 13:09:31

隨機放置svg多邊形

回答

相關問題