将圆角应用到路径/多边形 [英] Applying rounded corners to paths/polygons
问题描述
我正在为几个星期内开始的项目收集一些信息。
此项目包含一个基于浏览器的绘图工具，用户可以添加预定义的形状或自己形成形状。形状必须是可选择的，可自由缩放和可旋转的Illustrator样变换工具（手柄）。
我们想到的预定义形状是：矩形，椭圆，半椭圆和（等腰）三角形。
I'm gathering some info for a project that has to start within a few weeks. This project contains a browser-based drawing tool where users can add predefined shapes or forming shapes themselves. Shapes must be selectable, freely scalable and rotatable with a Illustrator-like transformtool (handles). Predefined shapes that we have in mind are: rectangles, ellipses, half ellipses and (isosceles) triangles.
到目前为止，思考RaphaelJS或FabricJS但...每个形状（多边形/路径）必须绘制一定的角半径。并且缩放时必须保持角半径，因此不会发生失真。用户可以通过输入指定舍入。
So far so good, to achieve this I was thinking of RaphaelJS or FabricJS but... Every shape (polygon/path) must be drawn with a certain cornerradius. And the cornerradius must be maintained while scaling, so no distortion occurs. The user can specify the rounding by input.
有几个障碍/问题：
- 有一些统一的数学公式来应用一个角半径到我提到的形状？还是必须将每个形状都视为一个迷你项目本身？
- 每次缩放或旋转操作，通过拖动变换手柄，将导致（大量）计算以检索更新的形状我想。矩形是最容易实现的，除了椭圆，所有其他形状将很难计算。
我发现了一个网站，用户可以在这个网站上绘制流程图，并在几乎所有的形状提供。它工作如此顺利，我不能指出他们是如何做到的。
链接： https://www.lucidchart.com/ （试用按钮）
I found a site where users can draw flowcharts and apply a cornerradius on almost all shapes the are offered. It works so smoothly, I can't nail how they did it. Link: https://www.lucidchart.com/ (try button)
现在，我有点无能，我想在数学上平庸。也许有人可以推动我朝正确的方向，分享一些经验？
For now, I'm a bit clueless, I guess to mediocre in mathematics. Perhaps someone can push me in the right direction and share some experiences?
提前感谢。
性能是这个项目的关键。图形的输出必须是SVG格式。
BTW. Performance is key in this project. The ouput of the drawing must be SVG format.
推荐答案
我最终有一个类似的问题，一个简单的解决方案。我最后写一个相当通用的圆角功能基于Adobe Illustrator的操作。它使用贝塞尔曲线而不是弧线，但我认为结果是相当不错的。
I ended up having a similar problem, and wasn't able to find a simple solution. I ended up writing a fairly generic corner-rounding function based on Adobe Illustrator's operation. It uses Bezier curves instead of arcs, but I think the result is pretty decent.
它支持在SVG图像的坐标空间中给定的半径舍入，
It supports rounding with a radius given in the coordinate space of the SVG image or as a fraction of the distance between a corner and its neighbors.
要使用它，请在您的项目中包含rounding.js并调用函数：
To use this, include rounding.js in your project and call the function:
roundPathCorners(pathString, radius, useFractionalRadius)
代码和一些测试路径在这里： http://embed.plnkr.co/kGnGGyoOCKil02k04snu/预览
The code and some test paths are here: http://embed.plnkr.co/kGnGGyoOCKil02k04snu/preview
这是Plnkr呈现的示例：
This is how the examples from the Plnkr render:
这篇关于将圆角应用到路径/多边形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
