我正在收集一个项目的信息,该项目必须在几周内开始.
该项目包含一个基于浏览器的绘图工具,用户可以自己添加预定义的形状或形成形状.形状必须可选择,可自由缩放,并可与Illustrator类型的转换工具(手柄)一起旋转.
我们想到的预定义的形状是：矩形,椭圆,半椭圆和(等腰)三角形.
该项目包含一个基于浏览器的绘图工具,用户可以自己添加预定义的形状或形成形状.形状必须可选择,可自由缩放,并可与Illustrator类型的转换工具(手柄)一起旋转.
我们想到的预定义的形状是：矩形,椭圆,半椭圆和(等腰)三角形.
到目前为止这么好,为了达到这个目的,我在想RaphaelJS或FabricJS,但每个形状(多边形/路径)都必须用一个特定的角度来绘制.并且在缩放时必须保持cornerradius,因此不会发生失真.用户可以通过输入指定舍入.
有一些障碍/问题：
>有没有一些统一的数学公式来应用一个角落,我提到的形状？或者每个形状都必须被视为一个迷你项目？我想将其作为一个路径或多个返回,因此可以使用SVG或画布来绘制.
>每个缩放或旋转操作,通过拖动变换句柄,将导致(大规模)计算来检索更新的形状我认为.矩形是最容易实现的,省略除外,所有其他形状将难以计算.有没有办法加快进程？
我发现一个网站,用户可以绘制流程图,并在几乎所有提供的形状上应用cornerradius.它工作得很顺利,我不能指出他们是如何做到的.
链接：https://www.lucidchart.com/(试用按钮)
现在,我有点无知,我想在数学中平庸.有人可能会把我推向正确的方向,分享一些经验？
提前致谢.
BTW.绩效是这个项目的关键.绘图的输出必须是SVG格式.
解决方法
我最终遇到了类似的问题,而且找不到一个简单的解决方案.我最终写了一个基于Adobe Illustrator操作的相当通用的转角函数.它使用贝塞尔曲线而不是弧,但我认为结果相当不错.
它支持使用在SVG图像的坐标空间中给出的半径舍入,或者作为角点与其邻居之间的距离的一小部分.
要使用它,请在您的项目中包含rounding.js,并调用该函数：
roundPathCorners(pathString,radius,useFractionalRadius)
代码和一些测试路径在这里：http://embed.plnkr.co/kGnGGyoOCKil02k04snu/preview
这就是Plnkr渲染的例子：
