简介
clipper-lib 是一个用于多边形裁剪和计算 Boolean 布尔运算的 JavaScript 库，可以在前端中使用。它实现了一系列基本的计算几何算法，如点的位置、多边形的交叉检测、边的定位等。clipper-lib 可以对几何形状进行简单的操作，例如对几何形状进行裁剪，求交集、并集、差集和同或运算等。
安装
clipper-lib 可以通过 npm 安装：
--- ------- -----------
使用方法
在前端 JavaScript 中，可以通过节点引入方式使用 clipper-lib 库：
----- ---------- - ----------------------- ----- -------------- - - --- ---- -- ----- --- ---- -- ----- --- ---- -- ----- --- ---- -- ----- -- ----- ----------- - - --- ---- -- ----- --- ---- -- ----- --- ---- -- ----- --- ---- -- ----- -- ----- ---------------- - --------------------------- ----------------------------------- ----------------- -------------- -- ------------------------------ -- ----- ---- -- ----- --- ---- -- ----- --- ---- -- ----- --- ---- -- ------ ---- ---- -- ----- --- ---- -- ----- --- ---- -- ----- --- ---- -- ------
代码中首先通过 require('clipper-lib') 引入了 clipper-lib 库。接着定义了两个多边形 subjectPolygon 和 clipPolygon。最后调用了 ClipperLib.Clipper.Execute() 函数，计算了两个多边形的交集，并将结果保存在 solutionPolygons 中。
应用实例
下面给出一些利用 clipper-lib 库进行多边形裁剪的应用实例。
水平裁剪
水平裁剪是指对多边形进行垂直于 x 轴或 y 轴的裁剪。这种裁剪比较简单，代码实现也比较容易。
----- -------------- - - - -- ---- -- --- -- - -- ---- -- --- -- - -- ---- -- --- -- - -- ---- -- --- -- -- ----- ----------- - - - -- ---- -- --- -- - -- ---- -- --- -- - -- ---- -- --- -- - -- ---- -- --- -- -- ----- ------- - --- --------------------- ------------------------------- ------------------------------ ------ ---------------------------- --------------------------- ------ ----- -------- - --- ------------------- --------------------------------------------------- --------- ----------------------------------- ------------------------------------ ---------------------- -- ------- - -- - -- --- ---- -- ----- -- --- ---- -- ----- -- --- ---- -- ----- -- --- ---- -- ----- -- -- -- - -- --- ---- -- ----- -- --- ---- -- ----- -- --- ---- -- ----- -- --- ---- -- ----- -- -- -- -
端点被包含的情况
当一个多边形完全被另一个多边形所包含时，经常出现一个问题：本来我们想将两个多边形的交集作为结果，但是只有其中一个多边形（即被包含的多边形）作为结果返回。
这是因为 Clipper 库会自动忽略掉被包含的多边形，因为它们对于计算多边形的新形状没有任何影响。为了得到正确的结果，我们需要进行一些特殊的处理。
----- -------------- - - - -- ---- -- --- -- - -- ---- -- --- -- - -- ---- -- --- -- - -- ---- -- --- -- -- ----- ----------- - - - -- ---- -- --- -- - -- ---- -- --- -- - -- ---- -- --- -- - -- ---- -- --- -- -- ----- ------- - --- --------------------- ------------------------------- ------------------------------ ------ ---------------------------- --------------------------- ------ ----- -------- - --- ------------------- --------------------------------------------------- --------- ----------------------------------- ------------------------------------ -- ------------ ----- ------------ - -------------------------------------------- ---------- -- -------------------- --- -- - ---------------- ------ -- - ------ ----------- - ---- - ---------------- ------ -- --- - ------ ----------- -
在上述代码中，首先定义了一个正方形和一个矩形。在调用 Clipper.Execute() 函数计算交集时，我们会得到矩形，但是我们期望的是一个呈 L 形的多边形。
为了判断结果是否为一个简单的多边形，我们将 solution[0] 作为输入传递给 ClipperLib.Clipper.CleanPolygon() 函数。这个函数将返回一个经过优化的多边形，同时也会忽略包含在它内部的非 subj 以及闵可夫斯基差分运算符得到的多边形。如果 mergedResult.length === 1，那么结果就是一个简单的多边形，否则就不是。
总结
在前端中，clipper-lib 是一个非常有用的 JavaScript 库。它可以实现多边形裁剪和计算 Boolean 布尔运算，并且拥有优秀的计算几何算法和参数调整选项。在开发需要多边形裁剪或计算 Boolean 布尔运算的前端应用时，clipper-lib 库有很强的指导意义，可以帮助我们实现更高效、更简洁的代码。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedcb23b5cbfe1ea0612551