在Javascript中偏移多边形

Question

EDIT5：终于用 Javascript 实现了 Angus Johnson 的 Clipper 库，并选择了 Sourceforge 作为主机。

现场演示：http://jsclipper.sourceforge.net/6.1.1.1/main_demo.html

下载源： https://sourceforge.net/projects/jsclipper/

带有分步教程的维基页面： https://sourceforge.net/p/jsclipper/wiki/Home%206/

演示程序的演示，包括数十个示例多边形： https://sourceforge.net/p/jsclipper/wiki/Main_Demo%206/

我希望这对任何需要具有偏移功能的折线和多边形裁剪库的人有所帮助。

---

EDIT4：一种可能性是使用将 pascal 转换为 javascript http://p2js.gelicon.biz/en/ 。还没有成功。 p2js.exe clipper.pas 给出致命错误“找不到裁剪器使用的单位系统”。

---

编辑：我找到了script# (Github)，它似乎能够将 C# 转换为 Javascript。 Clipper lib 在 C# 中可用，那么是否可以使用 Script# 进行 C#->JS 转换以及如何进行？

EDIT3：没有用 script# 转换，但也有 Emscripten，但 4000 cpp 行转换为 300 000 Javascript 行，所以不是一个选项。手动转换似乎是王道。

---

EDIT2：我做了an example，这表明了问题。使用左右箭头应用偏移。在一定距离内它工作正常，但随后出现问题。黄色描边多边形就是所谓的原始偏移多边形，AFAIK Clipper lib 提供了一种方法来处理删除原始偏移多边形中不需要的部分。

---

Angus Johnson 有一个 Clipper 库，用于偏移多边形。

我需要 Javascript 中的这个功能来偏移 SVG 多边形。

有人制作了它的 Javascript 端口吗？

如果没有，我会很感激一些指导方针，例如。以下：
- 这将是多么艰巨的任务？
- 选择哪一个作为源代码（Delphi、C#、C++）？
- lib 中的所有内容都需要抵消吗？

Clipper 库产生以下结果，这些结果正是所需的功能：

一些链接：
- Files in Sourceforge
- Clipper Documentation
- One Stackoverflow answer
- Offsetting algorithm

Answer 1

在多边形膨胀方面没有简单的解决方案。如果你有一个凹多边形，如果你足够减少偏移量，它迟早会分成几个更小的多边形。所以我建议使用现有的、经过验证的算法（Clipper 应该是一个不错的算法）。

关于将 C# 移植到 JS 的问题，我会说这当然是可能的，但问题是需要多少时间以及自动移植工具是否有用。从this discussion来看，我怀疑：

我快速尝试使用 ScriptSharp 将 C# 代码转换为 Javascript，但有太多不兼容的结构无法使用 我无法让它输出一个javascript文件。试图实施 Javascript 中的 Vatti 裁剪算法似乎是下一步。

...

是的，它不会帮助您使用各种自动转换 工具。裁剪器具有 Int64 或 Int128 等数据结构，它们是 在 JS 或 AS 中不存在。我只是将它们完全删除。Int32 应该 除非您从事与地理相关的工作，否则大多数情况下就足够了 或巨大的地图。

很遗憾，其中提到的用户之一的 ActionScript 端口不再可用。

Answer 2

我已经成功地将 Clipper 移植到 JS 中，经过一段时间的全面测试后，我将发布它。似乎所有功能都可以移植。

一个警告，128 位支持减少到 106 位。

其中一个优点是浏览器空间大，可以使用 svg、vml、html5 画布作为图形界面。

任何想法，哪个主机最容易发布，有演示的可能性？

---

编辑：

终于用 Javascript 实现了 Angus Johnson 的 Clipper 库，并选择了 Sourceforge 作为主机。

现场演示： http://jsclipper.sourceforge.net/6.1.1.1/main_demo.html

下载： https://sourceforge.net/projects/jsclipper/

带有分步教程的维基页面： https://sourceforge.net/p/jsclipper/wiki/Home%206/

演示程序的演示，包括数十个示例多边形： https://sourceforge.net/p/jsclipper/wiki/Main_Demo%206/

我希望这对任何需要具有偏移功能的折线和多边形裁剪库的人有所帮助。

Answer 3

    function offsetPoints(pts, offset) {
        let newPoints = [];
        for (let j = 0; j < pts.length; j++) {
            let i = (j - 1);
            if (i < 0) i += pts.length;
            let k = (j + 1) % pts.length;

            let v1 = [pts[j].x - pts[i].x, pts[j].y - pts[i].y];
            let mag1 = Math.sqrt(v1[0] * v1[0] + v1[1] * v1[1])
            v1 = [v1[0] / mag1, v1[1] / mag1]
            v1 = [v1[0] * offset, v1[1] * offset]
            let n1 = [-v1[1], v1[0]];
            let x1 = pts[i].x + n1[0];
            let y1 = pts[i].y + n1[1];
            let x2 = pts[j].x + n1[0];
            let y2 = pts[j].y + n1[1];

            let v2 = [pts[k].x - pts[j].x, pts[k].y - pts[j].y];
            let mag2 = Math.sqrt(v2[0] * v2[0] + v2[1] * v2[1])
            v2 = [v2[0] / mag2, v2[1] / mag2]
            v2 = [v2[0] * offset, v2[1] * offset]
            let n2 = [-v2[1], v2[0]];
            let x3 = pts[j].x + n2[0];
            let y3 = pts[j].y + n2[1];
            let x4 = pts[k].x + n2[0];
            let y4 = pts[k].y + n2[1];

            let den = ((y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1));
            let ua = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / den;
            let x = x1 + ua * (x2 - x1);
            let y = y1 + ua * (y2 - y1);

            newPoints.push({ x, y });
        }

        return newPoints;
    }