Javascript中的多边形偏移

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

现场演示：

下载来源：

Wikipage附带分步教程：

演示程序演示，包括数十个多边形示例：

我希望这有助于任何人谁需要多段线和多边形剪辑库与偏移功能

    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;
    }

---

EDIT4：一种可能性是使用 . 还没有成功

p2js.exe clipper.pas

给出致命错误“找不到clipper使用的单元系统”

---

编辑：我找到了（），它似乎能够将C#转换为Javascript。Clipper lib在C#中可用，因此是否有可能使用脚本进行C#->JS转换，以及如何进行转换

EDIT3:未使用脚本#转换，但也有Emscripten，但4000个cpp行转换为300000个Javascript行，因此不是选项。手动转换似乎是一个国王

---

EDIT2：我做了，这说明了问题所在。使用向左和向右箭头应用偏移。在一定距离内，它工作正常，但随后出现了一些问题。黄色笔划多边形称为“原始偏移多边形”，AFAIK裁剪器库提供了一种方法来删除原始偏移多边形中不需要的部分

---

Angus Johnson的Clipper库用于偏移多边形

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

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

如果没有，我希望能提供一些指导，如以下：
-这将是一项多么艰巨的任务？
-选择哪一个作为源代码（Delphi、C#、C++）？
-库中的所有内容都需要抵消吗

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

一些链接：
-
-
-

---

-对于多边形膨胀，没有简单的解决方案。如果你有一个凹多边形，如果你减少足够的偏移量，它迟早会分裂成几个较小的多边形。因此，我建议使用现有的、经过验证的算法（Clipper应该是一个好的算法）

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

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

是的，它不会帮助你使用各种自动转换 clipper有像Int64或Int128这样的数据结构，它们是 在JS或AS中不存在。我只是完全删除了它们。Int32应该 在大多数情况下，这已经足够了，除非你从事与地理相关的smth工作 或者巨大的地图

---

不幸的是，这里提到的一个用户的ActionScript端口不再可用。

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

需要注意的是，128位支持减少到106位

其优点之一是可以使用大量的浏览器空间，并且可以使用svg、vml、html5画布作为图形界面

有什么想法吗？哪一个主机最容易发布，有可能进行演示

---

编辑：

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

现场演示：

下载：

Wikipage附带分步教程：

演示程序演示，包括数十个多边形示例：

我希望这能帮助那些需要具有偏移功能的多段线和多边形裁剪库的人。

函数偏移点（pts，offset）{
    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;
    }

设newPoints=[]；
对于（设j=0；j

您不是已经解决了这个问题吗？有点像，但我喜欢简单的新几何体（多边形），而不是遮罩或相邻重复对象的复杂结构，这可能不适用于所有平台。这至少是可用的：。你是对的，自动转换不是一个选项。使用Emscripten 4000 cpp行转换为300000 JS行。我甚至没有测试它是否工作…似乎它包含一些错误。你能用一个例子来说明它是如何工作的吗？