javascript - Applying rounded corners to paths/polygons

Question

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.

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.

There's a few obstacles/questions:

• Is there some uniform mathemetical formula to apply a cornerradius to the shapes I mentioned? Or must every shape be treated as a mini-project itself? I want to return it as a path or poly, so it can be drawn with SVG or canvas.
• Every scale or rotate operation, by dragging the transformhandles, will result in (massive) calculations to retrieve an updated shape I think. Rectangles are the easiest to achieve and except ellipses, all the other shapes will be a lot harder to compute. Is there some way to speed up the process?

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?

Thanks in advance.

BTW. Performance is key in this project. The ouput of the drawing must be SVG format.

Answer 1

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.

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.

To use this, include rounding.js in your project and call the function:

roundPathCorners(pathString, radius, useFractionalRadius)

The code and some test paths are here: http://embed.plnkr.co/kGnGGyoOCKil02k04snu/preview

This is how the examples from the Plnkr render: