javascript - 以编程方式在圆形路径中创建 SVG 圆，与对象保持均匀距离

Question

我想创建一个 JavaScript 函数来动态生成 SVG 图像，如下所示:

该图像代表一张有许多座位和标签的 table 。我用来生成该表的代码如下:

<g id="svg_23">
     <ellipse sid="0" ry="34"  rx="34"  id="svg_13" cy="73"   cx="228" strokeWidth="1.5" stroke="#000" fill="#fff"/>
     <ellipse sid="1" ry="7.5" rx="7.5" id="svg_17" cy="26"   cx="228" fillOpacity="null" strokeOpacity="null" strokeWidth="1.5" stroke="#000" fill="#fff"/>
     <ellipse sid="2" ry="7.5" rx="7.5" id="svg_19" cy="37"   cx="260" fillOpacity="null" strokeOpacity="null" strokeWidth="1.5" stroke="#000" fill="#fff"/>
     <ellipse sid="3" ry="7.5" rx="7.5" id="svg_16" cy="72"   cx="275" fillOpacity="null" strokeOpacity="null" strokeWidth="1.5" stroke="#000" fill="#fff"/>
     <ellipse sid="4" ry="7.5" rx="7.5" id="svg_18" cy="106"  cx="260" fillOpacity="null" strokeOpacity="null" strokeWidth="1.5" stroke="#000" fill="#fff"/>
     <ellipse sid="5" ry="7.5" rx="7.5" id="svg_14" cy="120"  cx="228" fillOpacity="null" strokeOpacity="null" strokeWidth="1.5" stroke="#000" fill="#fff"/>
     <ellipse sid="6" ry="7.5" rx="7.5" id="svg_21" cy="107"  cx="194" fillOpacity="null" strokeOpacity="null" strokeWidth="1.5" stroke="#000" fill="#fff"/>
     <ellipse sid="7 "stroke="#000" ry="7.5" rx="7.5" id="svg_15" cy="73" cx="181" fillOpacity="null" strokeOpacity="null" strokeWidth="1.5" fill="#fff"/>
     <ellipse sid="8" ry="7.5" rx="7.5" id="svg_20" cy="40" cx="194" fillOpacity="null" strokeOpacity="null" strokeWidth="1.5" stroke="#000" fill="#fff"/>
     <text xmlSpace="preserve" textAnchor="start" fontFamily="Helvetica, Arial, sans-serif" fontSize="24" id="svg_22" y="80.5" x="219.5" fillOpacity="null" strokeOpacity="null" strokeWidth="0" stroke="#000" fill="#000000">B</text>
    </g>

我希望能够在 Javascript 函数中生成它，该函数将接收图像的 Y 和 X 坐标以及多个座位。例如，2 到 10 个座位。

该函数将返回均匀分布在 table 周围的座位。我最初的想法是计算放置座位的外圆的周长，然后除以座位数。这里的问题是如何计算每个座位的 X 和 Y 位置。

有什么想法吗？

Answer 1

计算出圆的 Angular (360/number_of_circles*index)后，您只需将其偏移 Angular 和距离

“这是这个方程。

X=距离*cos( Angular )

Y=距离*sin( Angular )

但这是距原点 (0,0) 的 Angular 和距离，通常您希望位置 (x,y) 距另一个位置 (x0, y0) 的 Angular 和距离。

X=距离*cos( Angular )+x0

Y=距离*sin( Angular ) +y0”

(复制粘贴自 https://www.construct.net/pl/forum/construct-2/how-do-i-18/how-do-i-calculate-position-x-78314 - 非常基本的三 Angular 数学;) )

但需要注意的是 - Angular 以弧度为单位，而不是度数，所以

var toRadians = function (degree) {
    return degree * (Math.PI / 180);
};