2 个不稳定版本
| 0.7.1 | 2024年4月25日 |
|---|---|
| 0.1.0 | 2023年8月31日 |
638 在 数学 中排名
89 每月下载次数
2.5MB
2K SLoC
包含 (WOFF 字体，99KB) fontawesome-webfont.woff，(WOFF 字体，78KB) fontawesome-webfont.woff2，(WOFF 字体，45KB) open-sans-v17-all-charsets-300.woff2，(WOFF 字体，41KB) open-sans-v17-all-charsets-300italic.woff2，(WOFF 字体，45KB) open-sans-v17-all-charsets-600.woff2，(WOFF 字体，43KB) open-sans-v17-all-charsets-600italic.woff2 以及更多。
iShape-js
演示
通过交互式演示尝试使用 iShape。演示涵盖了并集、交集、差集和排除等操作。
功能
- 操作：并集、交集、差集和排除。
- 多边形：带孔、自相交和多重路径。
- 简化：移除退化顶点并合并共线边。
- 填充规则：偶奇和非零。
入门
直接包含
下载库文件
- i_shape.js
- i_shape_bg.wasm
您可以在以下位置找到它： pkg
放置文件
将这些文件放置在您的 HTML 文件可以访问的目录中；在这个例子中，目录名为 ./ishape
NPM
安装
您可以从 NPM 安装 iShape 库。
npm install i_shape
NPM 包可在此处找到。
导入和使用
安装 NPM 包后，您可以在 JavaScript 或 TypeScript 文件中按以下方式导入：
import init, { Overlay, OverlayGraph, OverlayRule, ShapeType, FillRule } from './ishape/i_shape.js';
// Your code here
示例
以下是一个简单的 HTML 示例，演示了如何使用 iShape 库进行并集操作。
<!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>
说明
使用 init() 导入类并初始化 WebAssembly 模块。使用导入的类执行几何操作。
叠加规则
并集，A 或 B
交集，A 和 B
差集，B - A
排除，A xor B
