将圆角应用于路径/多边形

Question

我正在收集一些必须在几周内开始的项目的信息.该项目包含基于浏览器的绘图工具,用户可以在其中添加预定义的形状或自己形成形状.形状必须是可选择的,可自由缩放,并可使用类似Illustrator的transformtool(手柄)旋转.我们想到的预定义形状是:矩形,椭圆,半椭圆和(等腰)三角形.

到目前为止,为了达到这个目的,我想到了RaphaelJS或FabricJS但是...每个形状(多边形/路径)都必须用某个cornerradius绘制.并且在缩放时必须保持角半径,因此不会发生失真.用户可以通过输入指定舍入.

有一些障碍/问题:

是否有一些统一的数学公式将角半径应用于我提到的形状？或者每个形状都必须被视为迷你项目本身？我想将它作为路径或多边形返回,因此可以使用SVG或画布绘制它.
通过拖动变换手柄,每个缩放或旋转操作都将导致(大量)计算以检索我认为的更新形状.矩形是最容易实现的,除了椭圆之外,所有其他形状将更难计算.有没有办法加快这个过程？

我找到了一个网站,用户可以在其中绘制流程图并在几乎所有提供的形状上应用cornerradius.它运作得非常顺利,我无法确定它们是如何做到的.链接:https://www.lucidchart.com/(尝试按钮)

就目前而言,我有点无能为力,我想在数学方面平庸.也许有人可以把我推向正确的方向并分享一些经验？

提前致谢.

BTW.绩效是这个项目的关键.图纸的输出必须是SVG格式.

Answer 1

我最终遇到了类似的问题,但却找不到简单的解决方案.我最终编写了一个基于Adobe Illustrator操作的相当通用的转角函数.它使用贝塞尔曲线而不是弧线,但我认为结果相当不错.

它支持使用在SVG图像的坐标空间中给出的半径进行舍入,或者作为角与其邻居之间的距离的一部分.

要使用它,请在项目中包含rounding.js并调用函数:

roundPathCorners(pathString, radius, useFractionalRadius)

以下是Plnkr的示例:

SVG路径舍入示例

Answer 2

起点可以是using-svg-curves-to-imitate-rounded-corners。原理是将每个角都用简写的相对三次方进行转换。此示例非常基础，仅适用于两种可能的极端情况。

我认为用速记相对立方来扩展这个像角替换一样可以扩展到覆盖其他路径段。每一条线段都有一个曲线上的坐标点，必须用s线段代替。数学可能是这个解决方案中有趣的部分。