我正在尝试制作具有圆角的三角形。三角形看起来就像这样:SVG中的三角形上的圆角
左下角的是,似乎相当容易做,主要是因为这是一个90度“转弯”唯一的一个。该转向是使用SVG中的Q
命令使用以下参数制作的:
Q x,y + height, x, y + height - RADIUS
从我创建的弧的右边位开始。
但是,其他角落是可变的,这取决于三角形的大小。我可以使用atan()
函数来计算它们的角度,但我不知道如何实现它们。我希望它遵循RADIUS变量(在这种情况下为5)。
任何想法?
我正在尝试制作具有圆角的三角形。三角形看起来就像这样:SVG中的三角形上的圆角
左下角的是,似乎相当容易做,主要是因为这是一个90度“转弯”唯一的一个。该转向是使用SVG中的Q
命令使用以下参数制作的:
Q x,y + height, x, y + height - RADIUS
从我创建的弧的右边位开始。
但是,其他角落是可变的,这取决于三角形的大小。我可以使用atan()
函数来计算它们的角度,但我不知道如何实现它们。我希望它遵循RADIUS变量(在这种情况下为5)。
任何想法?
我假设你只需要这个角度为三角形,两边平行于基本轴,这使得事情变得更容易一些。
正如你所说的,正确的角度很容易。
对于其他角度,您需要计算圆心。假设w
和h
是三角形的宽度和高度。我们还要说x, y
是最右边节点的坐标。最右边的三角形的中心是:x - r * h/w, y - r
。您需要绘制的圆弧所覆盖的角度为π - α
,其中α
是您用atan
计算的角度角度。
最上面的拐角处理方式相似。
这应该让你开始。
使用a
命令我可以做出非常详细的角落rX
和rY
。我会打电话的功能,如:
a 5 5 0 0 1 0 5 5
,它将使半径为5的圆和dX = 5
和dY = 5
。这是完美的。
半径在90度时是理想的,所以当我有一个50度角时,我只需使用(50/90) * RADIUS
作为值,而且非常完美。