Crates.io | i_shape_js |
lib.rs | i_shape_js |
version | 0.7.1 |
source | src |
created_at | 2023-08-31 14:37:40.470518 |
updated_at | 2024-04-25 09:29:46.001451 |
description | Boolean Operations for 2D Polygons. Supported operations: intersection, union, difference, XOR, and self-intersections for all polygon varieties. |
homepage | |
repository | https://github.com/iShape-Rust/iShape-js |
max_upload_size | |
id | 960108 |
size | 6,268,074 |
2D geometry library for poly-bool operations such as union, intersection, difference and xor.
Try out iShape with an interactive demo. The demo covers operations like union, intersection, difference and exclusion
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 i_shape
The 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, OverlayGraph, OverlayRule, ShapeType, FillRule } from './ishape/i_shape.js';
// Your code here
Here is a simple HTML example that demonstrates how to use the iShape library for union operation.
<!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, OverlayGraph, OverlayRule, ShapeType, FillRule} from './ishape/i_shape.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 = new Overlay();
overlay.add_paths(subj, ShapeType.Subject);
overlay.add_paths(clip, ShapeType.Clip);
// build segments geometry
const graph = overlay.build_graph(FillRule.EvenOdd);
// apply union operation
const union = graph.extract_shapes(OverlayRule.Union);
// 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.