Question

你好吗？我想创建一个JavaScript函数，该函数将动态生成SVG图像，如下所示：

http://i66.tinypic.com/156e4cj_th.png

（imgur上传无效）

图像代表一张桌子，桌子上有很多座位和一个标签。我用来生成此表的代码如下：

<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个席位。

此功能将使桌子周围均匀分布的座椅返回。我最初的想法是计算放置座位的外圆的周长，然后除以座位数。这里的问题是如何计算每个座位的X和Y位置。

有什么想法吗？

Answer 1

计算圆的角度（360 / number_of_circles *索引）后，您只需将其偏移角度和距离即可

“这是方程式。

X =距离* cos（角度）

Y =距离* sin（角度）

但这是与原点（0,0）的角度和距离，通常您希望位置（x，y）与另一个位置（x0，y0）的角度和距离。

X =距离* cos（角度）+ x0

Y =距离* sin（角度）+ y0 “

（从以下位置复制粘贴 https://www.construct.net/pl/forum/construct-2/how-do-i-18/how-do-i-calculate-position-x-78314-非常基本的三角数学;））

虽然有一个音符-角度是弧度而不是度，所以

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

在圆形路径中以编程方式创建SVG圆，以保持与物体的均匀距离

1 个答案: