Try out iShape with an interactive demo.
- Boolean Operations: union, intersection, difference, and exclusion.
- Polygons: with holes, self-intersections, and multiple paths.
- Simplification: removes degenerate vertices and merges collinear edges.
- Fill Rules: even-odd, non-zero, positive and negative.
- ishape_wasm.js
- ishape_bg_wasm.wasm
You can find it at: pkg
Place these files in a directory that your HTML file can access; in this example, the directory is named ./ishape
You can install the iShape library from NPM:
npm install ishape_wasmThe NPM package is available here
After installing the NPM package, you can import it in your JavaScript or TypeScript file as follows:
import init, { Overlay, OverlayRule, FillRule } from './ishape/ishape_wasm.js'; // Your code hereHere is a simple HTML example that demonstrates how to use the iShape library for union operation. Full example is available here
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>iShape</title> <style> #result { background-color: #f5f5f5; border: 1px solid #ccc; padding: 10px; white-space: pre-wrap; font-family: monospace; } textarea { width: 100%; height: 150px; padding: 10px; font-family: monospace; margin-bottom: 10px; } </style> <script type="module"> import init, { Overlay, OverlayRule, FillRule} from './ishape/ishape_wasm.js'; init(); document.getElementById('union').addEventListener('click', () => { const subjInput = document.getElementById('subjInput').value; const clipInput = document.getElementById('clipInput').value; const subj = JSON.parse(subjInput); const clip = JSON.parse(clipInput); const overlay = Overlay.new_with_subj_and_clip(subj, clip); // apply union operation const union = overlay.overlay(OverlayRule.Union, FillRule.EvenOdd); // add more operations if required // ... const resultText = JSON.stringify(union, null, 2); document.getElementById('result').innerText = `Result:\n${resultText}`; }); </script> </head> <body> <textarea id="subjInput" placeholder='Enter "subj" polygon here...'>[[[200, 300], [200, 100], [400, 100], [400, 300]]]</textarea> <textarea id="clipInput" placeholder='Enter "clip" polygon here...'>[[[300, 400], [300, 200], [500, 200], [500, 400]]]</textarea> <button id="union">Union</button> <pre id="result"></pre> </body> </html>Import classes and initialize the WebAssembly module using init(). Use the imported classes to perform geometric operations.
| A,B | A ∪ B | A ∩ B | A - B | B - A | A ⊕ B |
|---|---|---|---|---|---|
 |  |  |  |  |  |