feat(site/blog): add docs of clipper-lib

qhanw · Jun 21, 2024 · cf73a03 · cf73a03
1 parent e4d2805
commit cf73a03
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 10 deletions.
diff --git a/site/blog/md/posts/clipper-lib-guide.md b/site/blog/md/posts/clipper-lib-guide.md
@@ -0,0 +1,41 @@
+---
+title: ClipperLib使用手册
+date: 2024-06-22T10:55:00+08:00
+category: Graphics
+tags: [Graphics, Algorithms]
+description: Clipper lib 库对直线和多边形执行裁剪和偏移。支持所有四种布尔裁剪操作——交集、并并、差和异或。多边形可以是任何形状，包括自相交多边形。
+draft: true
+---
+
+### 简介
+ClipperLib fork 自[Javascript Clipper](http://sourceforge.net/projects/jsclipper/)，是对直线和多边形执行裁剪和偏移操作。支持所有四种布尔裁剪操作：交集、并集、差集和异或。多边形可以是任何形状，包括自相交多边形。
+
+[Javascript Clipper](http://sourceforge.net/projects/jsclipper/)是对`Angus Johnson`的[Clipper](https://sourceforge.net/projects/polyclipping/)库的移植。
+
+- [在线示例](http://jsclipper.sourceforge.net/6.2.1.0/main_demo.html)
+- [资讯与示例](http://jsclipper.sourceforge.net/6.2.1.0/)
+
+> [!WARNING]
+> `Clipper`库的现版本已过时且不再维护，它已被该作者的[Clipper2](https://github.com/AngusJohnson/Clipper2)库取代，但目前还未有对应版本的`Javascript`库。目前存在`wasm`的移植版[Clipper2-WASM](https://github.com/ErikSom/Clipper2-WASM/)，但在项目使用中计算不够准确。
+
+
+
+
+### 特征
+- 线和多边形裁剪 - 交集，并集，差集和异或集
+- 线和多边形偏移，有 3 种连接方式 - 斜接、方形和圆形
+- 支持多种多边形填充规则（EvenOdd、NonZero、Positive、Negative）
+- 多边形可以是任意形状，包括自相交多边形
+- 包含 Minkowski 加法与减法函数
+- 相较于其他库效率极高
+- 使用 Tom Wu 的快速大整数库
+- 它在数值上是稳健的
+- 无论是免费软件还是商用都可以免费使用
+
+### 术语
+
+
+### 参考
+
+[Clipper 6 文档](https://github.com/junmer/clipper-lib/blob/master/Documentation.md)
+
diff --git a/site/blog/md/posts/geometry-calculation.md b/site/blog/md/posts/geometry-calculation.md
@@ -6,15 +6,15 @@ tags: [canvas, js]
 draft: true
 ---
 
-> Note
-> ##### 思考
-> 1. 图形透明区域算法计算出图形边界
-> 2. 创建多个Container来存放多次绘制的图形数据最后通过计算Container的边界来计算绘制图形的边界
-> 3. 检测绘制图形的边界是否临近某一元素，临近则加入临近元素的Container，否则新建一个Container并加入绘制元素。
-> 4. 图形顶点计算：
-> + 定义两个数组A、B，循环XY坐标，每次延X轴方向遇到的第一个点使用unshift推入数组A，后续其它点使用push推入数组B，依次循环到最后一个点，然后合并数组AB即可得到所有顶点
-> + 定义两个数组A，循环XY坐标，每次延X轴方向遇到的第一个点使用unshift推入数组A，后续其它点使用push推入数组A，依次循环到最后一个点，然后合并数组AB即可得到所有顶点，最后一个点即为开始点和结束点
-> + 注意：顶点计算规则为，当获取到一个点后，判断当前点的周围8个方向的点是否存在当前图形范围内，部分点存在则表示该点为边上的点，然后再移除这部分点中的有且只有一个同一方向存在两个的临近点的点，即为图形全部顶点坐标。
+### 思考
+
+1. 图形透明区域算法计算出图形边界
+2. 创建多个Container来存放多次绘制的图形数据最后通过计算Container的边界来计算绘制图形的边界
+3. 检测绘制图形的边界是否临近某一元素，临近则加入临近元素的Container，否则新建一个Container并加入绘制元素。
+4. 图形顶点计算：
+   + 定义两个数组A、B，循环XY坐标，每次延X轴方向遇到的第一个点使用unshift推入数组A，后续其它点使用push推入数组B，依次循环到最后一个点，然后合并数组AB即可得到所有顶点
+   + 定义两个数组A，循环XY坐标，每次延X轴方向遇到的第一个点使用unshift推入数组A，后续其它点使用push推入数组A，依次循环到最后一个点，然后合并数组AB即可得到所有顶点，最后一个点即为开始点和结束点
+   + 注意：顶点计算规则为，当获取到一个点后，判断当前点的周围8个方向的点是否存在当前图形范围内，部分点存在则表示该点为边上的点，然后再移除这部分点中的有且只有一个同一方向存在两个的临近点的点，即为图形全部顶点坐标。
 
 再多的思考还是不如一个好用的工具，在死去活来的折腾了好几天后，终于在万能的AI引导下，找到了[clipper-lib](https://github.com/junmer/clipper-lib)这个非常好用的图形计算工具库。算法是事，还是交给专业大佬们研究吧，还是做好工具的使用者就OK啦。
 
@@ -80,7 +80,8 @@ draft: true
 
 
 ### 参考
-- [Clipper库中文文档详解](https://www.cnblogs.com/zhigu/p/11943118.html)
+- [ClipperLib使用手册](/posts/clipper-lib-guide)
+- [Clipper 6 文档](https://github.com/junmer/clipper-lib/blob/master/Documentation.md)
 - [JavaScript-Clipper.js](https://www.cnblogs.com/zhigu/p/11928492.html)
 - [多边形计算库jsclipper的用法](https://www.sofineday.com/jsclipper.html)
 ```