用圆弧作为圆角的SVG路径

4
我需要创建具有圆角的SVG路径,以便将其导出为DXF进行切割。我的问题是,拐角应该是圆的弧线,而不是贝塞尔曲线。

使用arc命令处理直角相对容易,因为半径也是弧线开始处到拐角距离。但是,对于其他角度,情况要复杂得多。

是否有公式可以计算给定拐角和半径时弧的起点和终点?

enter image description here

右上角很容易,但左下角非常棘手,因为我必须找出线条必须结束和弧线开始的位置。

我找到了calculationg with a svg eliptical arc,其中链接了一个公式以将端点转换为中心参数化。但这并没有帮助,因为我也不知道圆的中心在哪里。

如何计算弧(圆)的SVG路径只计算弧,而不是替换尖角的两条线之间的弧。

SVG中三角形的圆角中的解决方案仅在某些边与坐标系平行或更改半径时起作用。

将圆角应用于路径/多边形尝试使用一些技巧进行线连接或多个立方曲线,这不是我想要的。

即使是我用来绘制上面图像的Inkscape,也会使用5个立方曲线而不是弧线,即使我使用圆来创建此形状。

如果您有一些提示,我将非常感激。


浏览器通常通过一个或多个贝塞尔曲线实现弧形绘制,因此即使您计算出要绘制的正确弧形,也不会改变任何内容。 - Robert Longson
这对我来说确实有所改变,因为我生成的SVG不仅在浏览器中显示,而且后来还要导出到DXF进行切割或绘图。在这里,拥有一个具有恒定角半径的倒角是非常重要的。 - Dehalion
你如何使用贝塞尔曲线定义非直角的圆角,以便不会偏离圆弧?有没有计算控制点的算法?我希望在角落里只有一个弧线/曲线,这样路径就不会变得太复杂。 - Dehalion
1个回答

10

一个倒角的角的几何形状如下图所示:

geometry of a chamfered corner

ABC等于θ(倒角角的外角)。这个角被BD平分,因此角DBC等于θ/2。这意味着从角落到点CA的偏移距离d等于r × tan(θ/2)。

对于直角,θ=90°且tan(θ/2)=1,因此d等于r

正如Robert Longson所说,你很幸运能找到一个使用圆弧段导出倒角的SVG应用程序。然而,通过一些努力,应该可以通过编程检测和转换它们。


看起来非常有前途,谢谢。我以后必须将路径导出为DXF,以便切割或绘制物品,因此这对我很重要。已经可以在直角上正常工作,我也想允许其他角度。 - Dehalion
更新:非常好用。 如果您已经知道角落的角度和半径,可以使用Math.abs(radius * Math.tan((180-angle)/2) - Dehalion
@Dehalion,如果你的SVG路径倒角代码可以轻松地从你的程序中提取出来,我很想看看你的最终代码。我有一个类似的问题,需要以编程方式生成非直角的激光切割图案的圆角。 - Yona Appletree
@Hypher 我正在准备一篇关于这个的博客文章,请稍等一下 :D - Dehalion

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接