Offsetting polygons in Javascript

Question

EDIT5: Finally got Angus Johnson's Clipper library implemented in Javascript and selected Sourceforge for host.

LIVE DEMO: http://jsclipper.sourceforge.net/6.1.1.1/main_demo.html

Download source: https://sourceforge.net/projects/jsclipper/

Wikipage with step-by-step tutorial: https://sourceforge.net/p/jsclipper/wiki/Home%206/

Presentation of Demo Program including tens of sample polygons: https://sourceforge.net/p/jsclipper/wiki/Main_Demo%206/

I hope this helps anyone who needs polyline and polygon clipping library with offsetting features.

---

EDIT4: The one possibility is to convert pascal to javascript using http://p2js.gelicon.biz/en/ . Not succeeded yet. p2js.exe clipper.pas gives Fatal error "Can't find unit system used by clipper".

---

EDIT: I found script# (Github), which seems to be able to convert C# to Javascript. Clipper lib is available in C#, so would it be possible to make C#->JS conversion using Script# and how?

EDIT3: Got not converted with script#, but there is also Emscripten, but 4000 cpp lines converted to 300 000 Javascript lines, so not an option. Manual conversion seems to be a king.

---

EDIT2: I made an example, which shows the problem. Use arrow left and right to apply offset. In certain distance it works ok, but then something goes wrong. The yellow stroked polygon is so called raw offset polygon, and AFAIK Clipper lib provides a way to take care of removing unneeded parts of raw offset polygon.

---

There is a Clipper library by Angus Johnson for offsetting polygons.

I'd need this functionality in Javascript for offsetting SVG polygons.

Has someone made a Javascript port of it?

If not, I'd appreciate some guidelines eg. the following:
- how enormous task it would be?
- which one to choose for source (Delphi, C#, C++)?
- is everything in lib needed for offsetting?

The Clipper library produces the following results which are just the desired functionality:

Some links:
- Files in Sourceforge
- Clipper Documentation
- One Stackoverflow answer
- Offsetting algorithm

Answer 1

I have succeded in porting clipper to JS, and after a while, after thorough testing going to release it. Seems that all the functionality could have been ported.

One caveat, 128bit support is reduced to 106bit.

One of the pros is to reach large space of browsers and possibility to use svg, vml, html5 canvas as graphics interface.

Any ideas, Which host would be easiest to publish, with demo possibility?

---

EDIT:

Finally got Angus Johnson's Clipper library implemented in Javascript and selected Sourceforge for host.

LIVE DEMO: http://jsclipper.sourceforge.net/6.1.1.1/main_demo.html

Downloads: https://sourceforge.net/projects/jsclipper/

Wikipage with step-by-step tutorial: https://sourceforge.net/p/jsclipper/wiki/Home%206/

Presentation of Demo Program including tens of sample polygons: https://sourceforge.net/p/jsclipper/wiki/Main_Demo%206/

I hope this helps anyone who needs polyline and polygon clipping library with offsetting features.

Answer 2

There are no simple solutions when it comes to polygon inflating. If you have a concave polygon, sooner or later it will break into several smaller polygons if you decrease the offset enough. So I would suggest using an existing, proven, algorithm (Clipper should be a good one).

On your question about porting C# to JS, I would say it's certainly possible, but the question is how much time it would take and whether the auto-porting tools will be of any use. Judging from this discussion, I doubt it:

I took a quick stab at using ScriptSharp to translate the C# code to Javascript, but there are too many incompatible structures to use that and I couldn't get it to output a javascript file. Trying to implement the Vatti clipping algorithm in Javascript seems to be the next step.

...

And yes, it won't help you using all sorts of automatics conversion tools.The clipper has data structures like Int64 or Int128 which are non existent in JS or AS .I just removed them altogether .Int32 should be enough for most cases unless you work on smth related to geography or huge maps .

The ActionScript port one of the users there mentions is no longer available, unfortunately.

Answer 3

    function offsetPoints(pts, offset) {
        let newPoints = [];
        for (let j = 0; j < pts.length; j++) {
            let i = (j - 1);
            if (i < 0) i += pts.length;
            let k = (j + 1) % pts.length;

            let v1 = [pts[j].x - pts[i].x, pts[j].y - pts[i].y];
            let mag1 = Math.sqrt(v1[0] * v1[0] + v1[1] * v1[1])
            v1 = [v1[0] / mag1, v1[1] / mag1]
            v1 = [v1[0] * offset, v1[1] * offset]
            let n1 = [-v1[1], v1[0]];
            let x1 = pts[i].x + n1[0];
            let y1 = pts[i].y + n1[1];
            let x2 = pts[j].x + n1[0];
            let y2 = pts[j].y + n1[1];

            let v2 = [pts[k].x - pts[j].x, pts[k].y - pts[j].y];
            let mag2 = Math.sqrt(v2[0] * v2[0] + v2[1] * v2[1])
            v2 = [v2[0] / mag2, v2[1] / mag2]
            v2 = [v2[0] * offset, v2[1] * offset]
            let n2 = [-v2[1], v2[0]];
            let x3 = pts[j].x + n2[0];
            let y3 = pts[j].y + n2[1];
            let x4 = pts[k].x + n2[0];
            let y4 = pts[k].y + n2[1];

            let den = ((y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1));
            let ua = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / den;
            let x = x1 + ua * (x2 - x1);
            let y = y1 + ua * (y2 - y1);

            newPoints.push({ x, y });
        }

        return newPoints;
    }