Raphael Js: Wie man die Elemente in einem Raphael-Set in einem Kurvenpfad neu anordnen

Question

Ich arbeitete in Raphael Js, um ein Layout in Svg zu erstellen. Ich habe einige Kreise erstellt, die in Zeilen und Spalten angeordnet sind. Angenommen, es gibt 15 Kreise in Spalten und 5 in Reihen, wie in dem angehängten Bild. Hier werden alle Elemente zuerst in einer geraden Linie gezeichnet. Das ist gut und wie gewünscht. Aber in einigen gezeichneten Sätzen würde ich das ganze Set schräg stellen und sie auch in einer Kurve (horizontal/vertikal) anordnen wollen. Ich habe versucht, einen Bereichsschieberegler zu verwenden, um die Kurve der Elemente zu bestimmen.

Wie kann ich es erreichen?

Answer 1

1. draw arch (oder jeder komplexen Pfad)
2. des get Pfad (x, y) Wert
3. Plot Kreisen unter Verwendung Pfad. QED.

HINWEIS: In Raphael, verwenden paper.circle(..) statt svgdoc.appendChild() mit getCircle().

function getCircle(x,y, width, height) { 
 
    var xmlns = "http://www.w3.org/2000/svg"; 
 
    var xlink = "http://www.w3.org/1999/xlink"; 
 

 
    var Elem; // ouput SVG element 
 
    Elem = document.createElementNS(xmlns,"use"); 
 
    Elem.setAttributeNS(null, 'x', x); 
 
    Elem.setAttributeNS(null, 'y', y); 
 
    Elem.setAttributeNS(null, 'width', width); 
 
    Elem.setAttributeNS(null, 'height', height); 
 
    Elem.setAttributeNS(xlink, 'xlink:href', '#sym01'); 
 
    return Elem; 
 
} 
 

 

 
var svgdoc = document.getElementById('mySVG'); 
 
var curve1 = document.getElementById('curve1'); 
 
var len = curve1.getTotalLength(); 
 

 
for (var y_pos = 0; y_pos < 10; ++y_pos) { 
 
for (var i = 0; i <= 20; ++i) { 
 
    var pt = curve1.getPointAtLength((i*5/100)*len); 
 
    svgdoc.appendChild(getCircle(pt.x-5,pt.y+y_pos*20, 10,10)); 
 
} 
 
}

<svg id='mySVG' width="400" height="400"> 
 
<!-- symbol definition NEVER draw --> 
 
<symbol id="sym01" viewBox="0 0 40 40"> 
 
    <circle cx="20" cy="20" r="17" stroke-width="2" stroke="red" fill="pink"/> 
 
</symbol> 
 

 
<path id="curve1" d="M10 100 Q 200 -10 390 100" stroke="red" fill="transparent"/> 
 
<!-- actual drawing with "use" element --> 
 

 
</svg>