2013-07-15 161 views
4

我正在尝试制作具有圆角的三角形。三角形看起来就像这样:SVG中的三角形上的圆角

enter image description here

左下角的是,似乎相当容易做,主要是因为这是一个90度“转弯”唯一的一个。该转向是使用SVG中的Q命令使用以下参数制作的:

Q x,y + height, x, y + height - RADIUS从我创建的弧的右边位开始。

但是,其他角落是可变的,这取决于三角形的大小。我可以使用atan()函数来计算它们的角度,但我不知道如何实现它们。我希望它遵循RADIUS变量(在这种情况下为5)。

任何想法?

回答

1

我假设你只需要这个角度为三角形,两边平行于基本轴,这使得事情变得更容易一些。

正如你所说的,正确的角度很容易。

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

最上面的拐角处理方式相似。

这应该让你开始。

1

使用a命令我可以做出非常详细的角落rXrY。我会打电话的功能,如:

a 5 5 0 0 1 0 5 5,它将使半径为5的圆和dX = 5dY = 5。这是完美的。

半径在90度时是理想的,所以当我有一个50度角时,我只需使用(50/90) * RADIUS作为值,而且非常完美。