小编MaP*_*aBa的帖子

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

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

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

有一些障碍/问题:

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

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

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

提前致谢.

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

javascript svg canvas raphael fabricjs

16
推荐指数
2
解决办法
2万
查看次数

标签 统计

canvas ×1

fabricjs ×1

javascript ×1

raphael ×1

svg ×1