Raphael Js：カーブパス内のラプラセット内の要素を再配置する方法

Question

私はRaphael Jsでsvgでレイアウトを作成していました。私は行と列に配置されているいくつかの円を作成しました。付属の画像のように、列に15個の円があり、行に5個の円があるとします。 ここでは、すべての要素が最初に直線で描画されます。これは良いことです。しかし、一部のセットでは、全体のセットを歪ませ、それらを曲線（水平/垂直）に配置したいと思うでしょう。私は範囲スライダを使って要素のカーブを決定しようとしていました。

どうすれば実現できますか？

Answer 1

1. ドローアーチ（または任意の複雑な経路）
2. GETパスの（x、y）の値のパスを使用して
3. プロットサークル。 QED。

注：ラファエルで、getCircle()でpaper.circle(..)の代わりsvgdoc.appendChild()を使用しています。

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>