Raphael Js：如何在曲线路径中重新排列 raphael 集中的元素

Question

我在 Raphael Js 中工作以在 svg 中创建布局。我创建了一些按行和列排列的圆圈。假设列中有 15 个圆圈，行中有 5 个圆圈，如附图所示。 这里首先将所有元素绘制成一条直线。这很好，正如所愿。但是在绘制的某些集合中，我想倾斜整个集合并将它们排列成曲线（水平/垂直）。我试图使用范围滑块来确定元素的曲线。

我怎样才能实现它？

Answer 1

1. 绘制拱门（或任何复杂路径）
2. 获取路径的 (x,y) 值
3. 使用路径绘制圆圈。 QED。

注意：在 Raphael 中，使用 paper.circle(..) 而不是 svgdoc.appendChild() 和 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>