javascript - Javascriptでポリゴンをオフセットする

Question

EDIT5：ついに、Angus JohnsonのClipperライブラリをJavascriptで実装し、ホストとしてSourceforgeを選択しました。

ライブデモ：http：//jsclipper.sourceforge.net/6.1.1.1/main_demo.html

ソースをダウンロード： https ：//sourceforge.net/projects/jsclipper/

ステップバイステップのチュートリアルを含むWikiページ： https ：//sourceforge.net/p/jsclipper/wiki/Home%206/

数十のサンプルポリゴンを含むデモプログラムのプレゼンテーション： https ：//sourceforge.net/p/jsclipper/wiki/Main_Demo%206/

これが、オフセット機能を備えたポリラインおよびポリゴンクリッピングライブラリを必要とするすべての人に役立つことを願っています。

---

EDIT4：1つの可能性は、http：//p2js.gelicon.biz/en/を使用してpascalをjavascriptに変換すること です。まだ成功していません。p2js.exe clipper.pas「クリッパーが使用する単位系が見つかりません」という致命的なエラーが発生します。

---

編集：C＃をJavascriptに変換できるように見えるscript＃（Github ）を見つけました。Clipper libはC＃で利用できるので、Script＃を使用してC＃-> JS変換を行うことは可能でしょうか？

EDIT3：script＃で変換されませんでしたが、Emscriptenもありますが、4000cpp行が300000 Javascript行に変換されたため、オプションではありません。手動変換は王様のようです。

---

EDIT2：問題を示す例を作成しました。左右の矢印を使用してオフセットを適用します。特定の距離では問題なく動作しますが、問題が発生します。黄色のストロークポリゴンは、いわゆる生のオフセットポリゴンと呼ばれ、AFAIK Clipper libは、生のオフセットポリゴンの不要な部分を削除する方法を提供します。

---

ポリゴンをオフセットするためのAngusJohnsonによるClipperライブラリがあります。

SVGポリゴンをオフセットするには、Javascriptでこの機能が必要です。

誰かがそれのJavascriptポートを作成しましたか？

そうでない場合は、いくつかのガイドラインをいただければ幸いです。次のように：
-それはどれほど巨大なタスクになるでしょうか？
-ソース（Delphi、C＃、C ++）にどれを選択しますか？
-オフセットにはlib内のすべてが必要ですか？

Clipperライブラリは、必要な機能である次の結果を生成します。

いくつかのリンク： -Sourceforgeのファイル
-クリッパーのドキュメント -1つのStackoverflowの回答 -オフセットアルゴリズム

Answer 1

私はクリッパーをJSに移植することに成功し、しばらくして、徹底的なテストを経てリリースしました。すべての機能が移植された可能性があるようです。

1つの注意点、128ビットのサポートは106ビットに削減されます。

長所の1つは、ブラウザの広いスペースに到達し、グラフィックインターフェイスとしてsvg、vml、html5キャンバスを使用できるようにすることです。

デモの可能性がある、公開するのが最も簡単なホストはどれですか？

---

編集：

最後に、Angus JohnsonのClipperライブラリをJavascriptで実装し、ホストとしてSourceforgeを選択しました。

ライブデモ：http： //jsclipper.sourceforge.net/6.1.1.1/main_demo.html

ダウンロード： https ：//sourceforge.net/projects/jsclipper/

ステップバイステップのチュートリアルを含むWikiページ： https ：//sourceforge.net/p/jsclipper/wiki/Home%206/

数十のサンプルポリゴンを含むデモプログラムのプレゼンテーション： https ：//sourceforge.net/p/jsclipper/wiki/Main_Demo%206/

これが、オフセット機能を備えたポリラインおよびポリゴンクリッピングライブラリを必要とするすべての人に役立つことを願っています。

Answer 2

ポリゴンの膨張に関しては、簡単な解決策はありません。凹多角形がある場合、オフセットを十分に小さくすると、遅かれ早かれ、いくつかの小さな多角形に分割されます。したがって、既存の実績のあるアルゴリズムを使用することをお勧めします（Clipperは優れたアルゴリズムである必要があります）。

C＃をJSに移植することについてのあなたの質問については、確かに可能だと思いますが、問題は、どれくらいの時間がかかるか、そして自動移植ツールが役立つかどうかです。この議論から判断すると、私はそれを疑っています：

ScriptSharpを使用してC＃コードをJavascriptに変換する方法を簡単に試しましたが、互換性のない構造が多すぎて使用できず、javascriptファイルを出力できませんでした。次のステップは、JavascriptでVattiクリッピングアルゴリズムを実装することです。

..。

もちろん、あらゆる種類の自動変換ツールを使用するのに役立ちません。クリッパーには、JSやASには存在しないInt64やInt128などのデータ構造があります。これらを完全に削除しました。ほとんどの場合、Int32で十分です。地理または巨大な地図に関連するsmthに取り組みます。

残念ながら、そこに記載されているユーザーの1人がActionScriptポートを使用できなくなりました。

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