2016-04-18 9 views
1

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

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

答えて

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

+0

アルビン-K @おかげで、あなたのコードが良い作品。これは本当に私が曲線のデザインを描くのを助けました。しかし、私はもう少し賛成したい。私の正確な問題は、サークルが最初に一直線に描かれていたことでした。上記の写真と同じですが、後で私はスライダーや数値のスピナーを使ってデザインをカーブしたかったのです。私はただ既存のデザインを削除し、あなたの答えを使って新しい曲線を描きたいとは思わない。 –

+1

'$ .each(paper、....')を使ってラファエロ要素(円)をループし、計算した '(x、y)'値を適用します。 –

関連する問題