i_shape_js v0.2.2
iShape-js
Demo
Try out iShape with an interactive demo. The demo covers operations like union, intersection, difference and exclusion
Features
- Supports all basic set operations such as union, intersection, difference, exclusion and self-intersection.
- Capable of handling various types of polygons, including self-intersecting polygons, multiple paths and polygons with holes.
- Optimizes by removing unnecessary vertices and merging parallel edges.
- Effectively handles an arbitrary number of overlaps, resolving them using the even-odd rule.
- Employs integer arithmetic for computations.
Working Range and Precision
The i_overlay library operates within the following ranges and precision levels:
Extended Range: From -1,000,000 to 1,000,000 with a precision of 0.001. Recommended Range: From -100,000 to 100,000 with a precision of 0.01 for more accurate results. Utilizing the library within the recommended range ensures optimal accuracy in computations and is advised for most use cases.
Getting Started
Direct include
Download Library Files:
- i_shape_js.js
- i_shape_js_bg.wasm
You can find it at: pkg
Place Files:
Place these files in a directory that your HTML file can access; in this example, the directory is named ./ishape
NPM
Installation
You can install the iShape library from NPM:
npm install i_shape_jsThe NPM package is available here
Import and Usage
After installing the NPM package, you can import it in your JavaScript or TypeScript file as follows:
import init, { JsOverlay, JsOverlayGraph, JsShapeType, JsFillRule } from 'i_shape_js';
// Your code hereExample
Here is a simple HTML example that demonstrates how to use the iShape library for geometric union operations.
<!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;
}
</style>
<script type="module">
import init, { JsOverlay, JsOverlayGraph, JsShapeType, JsFillRule} from './ishape/i_shape_js.js';
init();
document.getElementById('union').addEventListener('click', () => {
const subj = {
paths: [
{
points: [[200, 300], [200, 100], [400, 100], [400, 300]]
}
]
}
const clip = {
paths: [
{
points: [[300, 400], [300, 200], [500, 200], [500, 400]]
}
]
}
const overlay = new JsOverlay();
overlay.add_shape(subj, JsShapeType.Subject);
overlay.add_shape(clip, JsShapeType.Clip);
const graph = overlay.build_graph();
const result = graph.extract_shapes(JsFillRule.Union);
const resultText = JSON.stringify(result, null, 2);
document.getElementById('result').innerText = `Result:\n${resultText}`;
});
</script>
</head>
<body>
<button id="union">Union</button>
<pre id="result"></pre>
</body>
</html>Explanation:
Import classes and initialize the WebAssembly module using init(). Use the imported classes to perform geometric operations.
Note
This is a basic example. You can extend it further to suit your application's specific needs.