Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
js-angusj-clipper
Advanced tools
Changelog
v1.3.1
scalePath
/scalePaths
from reversing the path.clipToPaths
and clipToPolyTree
. The did not return undefined.Readme
a port of Angus Johnson's clipper to WebAssembly/Asm.js
Install it with npm install --save js-angusj-clipper
To support this project star it on github!
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.
Because sometimes performance does matter and I could not find a javascript library as fast or as rock solid as the C++ version of Clipper.
As an example, the results of the benchmarks included on the test suite when running on my machine (node 17.9.0) are:
Note, pureJs is jsclipper, a pure JS port of the same library
500 boolean operations over two circles of 5000 points each
clipType: intersection, subjectFillType: evenOdd
✓ wasm (212 ms)
✓ asmJs (598 ms)
✓ pureJs (573 ms)
clipType: union, subjectFillType: evenOdd
✓ wasm (267 ms)
✓ asmJs (666 ms)
✓ pureJs (663 ms)
clipType: difference, subjectFillType: evenOdd
✓ wasm (232 ms)
✓ asmJs (575 ms)
✓ pureJs (573 ms)
clipType: xor, subjectFillType: evenOdd
✓ wasm (296 ms)
✓ asmJs (681 ms)
✓ pureJs (779 ms)
10000 boolean operations over two circles of 100 points each
clipType: intersection, subjectFillType: evenOdd
✓ wasm (143 ms)
✓ asmJs (347 ms)
✓ pureJs (255 ms)
clipType: union, subjectFillType: evenOdd
✓ wasm (181 ms)
✓ asmJs (417 ms)
✓ pureJs (265 ms)
clipType: difference, subjectFillType: evenOdd
✓ wasm (159 ms)
✓ asmJs (339 ms)
✓ pureJs (239 ms)
clipType: xor, subjectFillType: evenOdd
✓ wasm (186 ms)
✓ asmJs (404 ms)
✓ pureJs (262 ms)
100 offset operations over a circle of 5000 points
joinType: miter, endType: closedPolygon, delta: 5
✓ wasm (129 ms)
✓ asmJs (390 ms)
✓ pureJs (702 ms)
joinType: miter, endType: closedPolygon, delta: 0
✓ wasm (34 ms)
✓ asmJs (140 ms)
✓ pureJs (108 ms)
joinType: miter, endType: closedPolygon, delta: -5
✓ wasm (146 ms)
✓ asmJs (386 ms)
✓ pureJs (770 ms)
5000 offset operations over a circle of 100 points
joinType: miter, endType: closedPolygon, delta: 5
✓ wasm (74 ms)
✓ asmJs (161 ms)
✓ pureJs (278 ms)
joinType: miter, endType: closedPolygon, delta: 0
✓ wasm (61 ms)
✓ asmJs (138 ms)
✓ pureJs (162 ms)
joinType: miter, endType: closedPolygon, delta: -5
✓ wasm (109 ms)
✓ asmJs (271 ms)
✓ pureJs (659 ms)
More or less, the results for boolean operations over moderately big polygons are:
and for small polygons are:
As for offsetting, the results for a moderately big polygon are:
and for small polygons are:
// universal version
// import it with
import * as clipperLib from "js-angusj-clipper"; // es6 / typescript
// or
const clipperLib = require("js-angusj-clipper"); // nodejs style require
// web-only version (for example for angular 6+)
// import it with
import * as clipperLib from "js-angusj-clipper/web"; // es6 / typescript
// or
const clipperLib = require("js-angusj-clipper/web"); // nodejs style require
async function mainAsync() {
// create an instance of the library (usually only do this once in your app)
const clipper = await clipperLib.loadNativeClipperLibInstanceAsync(
// let it autodetect which one to use, but also available WasmOnly and AsmJsOnly
clipperLib.NativeClipperLibRequestedFormat.WasmWithAsmJsFallback
);
// create some polygons (note that they MUST be integer coordinates)
const poly1 = [{ x: 0, y: 0 }, { x: 10, y: 0 }, { x: 10, y: 10 }, { x: 0, y: 10 }];
const poly2 = [{ x: 10, y: 0 }, { x: 20, y: 0 }, { x: 20, y: 10 }, { x: 10, y: 10 }];
// get their union
const polyResult = clipper.clipToPaths({
clipType: clipperLib.ClipType.Union,
subjectInputs: [{ data: poly1, closed: true }],
clipInputs: [{ data: poly2 }],
subjectFillType: clipperLib.PolyFillType.EvenOdd
});
/* polyResult will be:
[
[
{ x: 0, y: 0 },
{ x: 20, y: 0 },
{ x: 20, y: 10 },
{ x: 0, y: 10 }
]
]
*/
}
mainAsync();
For an in-depth description of the library see:
FAQs
Polygon and line clipping and offsetting library for Javascript / Typescript - a port of Angus Johnson's clipper to WebAssembly / Asm.JS
The npm package js-angusj-clipper receives a total of 1,572 weekly downloads. As such, js-angusj-clipper popularity was classified as popular.
We found that js-angusj-clipper demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.