CODEWITHSUNDEEP
javascriptsvgpathjquery-animateraphael
Harish Chandra Kharel
Harish Chandra Kharel

Reputation: 433

Raphael Js : How to re-arrange the elements inside a raphael set in a curve path

I was working in Raphael Js to create a layout in svg. I have created some circles that are arranged in rows and column. Say there are 15 circles in columns and 5 in rows like in the image attached. Layout is like as shown in the picture attached Here all the elements are first drawn in a straight line. This is good and as wished. But in some sets drawn, I would want to skew the whole set and also arrange them in a curve (horizontal/vertical). I was trying to use a range slider to determine the curve of the elements.

How can I achieve it?

Upvotes: 1

Views: 285

Answers (1)

Alvin K.
Alvin K.

Reputation: 4379

  1. draw arch (or any complex path)
  2. get path's (x,y) value
  3. plot circles using path. QED.

NOTE: In Raphael, use paper.circle(..) instead of svgdoc.appendChild() with 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>

Upvotes: 2

Related Questions