Search code examples
javascriptsvggeometryscript#

Offsetting polygons in Javascript

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:

Offset Polygons, polygons, delta, jointype, miterlimit, jtSquare jtRound jtMiter

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

Solution

  • 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.