Offsetting polygons in Javascript

polygon offsetting by computing winding numbers
polygon clipping c#
c# polygon union
polygon boolean operations
python offset polygon
fast polygon union
c++ polygon library
c# polygon intersection library

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

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.

w8r/polygon-offset: Small lib for polygon offsetting(margin , Contribute to w8r/polygon-offset development by creating an account on GitHub. w8r.github.io/polygon-offset <script src="path/to/offset.min.js"></script>  A library to make polygon clipping (boolean operations) and offsetting fast on Javascript thanks to WebAssembly with a fallback to Asm.js, based on the excellent Polygon Clipping (also known as Clipper) library by Angus Johnson.

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.

polygon-offset, The Javascript Clipper Library performs clipping and offsetting of both lines and polygons. A number of  B. Offsetting paths. Another main feature in Clipper library is polygon and polyline offsetting. It's purpose is to fatten (bolden, inflate, dilate, positive offset) or thin (deflate, erode, negative offset) polygons by certain amount or fatten polylines.

    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;
    }

Javascript Clipper / Wiki / Home 6, function offsetArc(arc, w) { let {Point, Segment, Vector, Line, Box, Arc, Polygon, Face} = Flatten; let {vector} = Flatten; let edges = []; Donate Javascript Clipper Project. C. Boolean operations of polygons using ExPolygon and PolyTree structure. In C# Clipper 6 there is not anymore ExPolygons structure, but in Javascript Clipper 6 we have implemented conversion functions that allow conversion from PolyTree to ExPolygons as well as from ExPolygons to Polygons as well as from PolyTree to Polygons.

Javascript Clipper / Wiki / documentation, JavaScript preprocessors can help make authoring JavaScript easier and more html, body { margin: 0; } .canvas, .polygon-offset { display: inline-block;  The Javascript Clipper library performs clipping and offsetting for both lines and polygons. All four boolean clipping operations are supported - intersection, union, difference and exclusive-or. Polygons can be of any shape including self-intersecting polygons.

Offset Polygon / Alex Bol / Observable, Offsetting polygons in Javascript. Question. EDIT5: Finally got Angus Johnson's Clipper library implemented in Javascript and selected Sourceforge for host. The polygon you are looking for is called inward/outward offset polygon in computational geometry and it is closely related to the straight skeleton. These are several offset polygons for a complicated polygon: And this is the straight skeleton for another polygon:

Straight Skeleton Polygon Offset, The δ-annulus of a polygon P is the closed region containing all points in the plane at distance at most δ from the boundary of P. An inner (resp., outer) δ-offset​  The Clipper library performs clipping and offsetting for both lines and polygons. All four boolean clipping operations are supported - intersection, union, difference and exclusive-or. Polygons can be of any shape including self-intersecting polygons.

Comments
  • Didn't you solve this already? stackoverflow.com/questions/12723832/…
  • Sort of, but I'd appreciate simple new geometry (polygon) instead of complex structures of masks or adjacent duplicate objects, which may not work in every platform.
  • This is at least available: github.com/ChrisDenham/PolygonClipper.AS3. You are right that automatic conversion is not an option. Using Emscripten 4000 cpp lines converted to 300 000 JS lines. I don't even tested if it works...