javascript - SVG中三 Angular 形的圆 Angular

Question

我正在尝试制作一个带有圆 Angular 的三 Angular 形。三 Angular 形看起来像这样:

左下角是唯一看起来相当容易制作的 Angular ，主要是因为那是一个 90 度“转弯”。该转弯是使用 SVG 中的 Q 命令和以下参数完成的:

Q x,y + height, x, y + height - RADIUS 从我正在创建的弧的右侧开始。

但是，其他 Angular 是可变的，具体取决于三 Angular 形的大小。我可以使用 atan() 函数计算它们的 Angular ，但我不知道如何实现它们。我希望它遵循 RADIUS 变量(在本例中为 5)。

有什么想法吗？

Answer 1

我假设您只需要对边平行于基本轴的直 Angular 三 Angular 形使用它，这会让事情变得更容易一些。

正如您所说，直 Angular 很容易。

对于其他 Angular ，您需要计算圆心。假设 w 和 h 是三 Angular 形的宽度和高度。我们还假设 x, y 是最右边节点的坐标。最右边三 Angular 形的中心是:x - r * h/w, y - r。您需要绘制的圆弧所覆盖的 Angular 是 π - α，其中 α 是您使用 atan 计算的 Angular Angular 。

最顶 Angular 的处理方式类似。

这应该可以帮助您入门。