パス/ポリゴンに角を適用する

Question

数週間以内に開始する必要があるプロジェクトの情報を収集しています。 このプロジェクトには、ユーザーが定義済みの図形を追加したり、図形を作成したりできるブラウザベースの描画ツールが含まれています。図形は、Illustratorのような変形ツール（ハンドル）で選択可能で、自由にスケーラブルで回転可能でなければなりません。 私たちが心に留めている定義済みの図形は、長方形、楕円形、半楕円形および（二等辺三角形）の三角形です。

これまでのところ、RaphaelJSやFabricJSを考えていましたが、...すべてのシェイプ（ポリゴン/パス）を特定のコーナーラジアスで描画する必要があります。また、スケーリング時にコーナーラジアスを維持する必要があるため、歪みは発生しません。ユーザは、入力によって丸めを指定することができます。

いくつかの障害物/質問があります：

• は、私が言及した形状にcornerradiusを適用するには、いくつかの均一mathemetical式はありますか？または、すべての形状をミニプロジェクトそのものとして扱う必要がありますか？ SVGやキャンバスで描くことができるように、パスまたはポリゴンとして返したいと思います。
• すべての縮尺または回転操作は、変形ハンドルをドラッグすることで、（大量の）計算結果を得ることができます。四角形は、楕円形を除き達成するのが最も簡単で、他のすべての図形は計算するのがずっと難しくなります。プロセスをスピードアップする方法はありますか？

私は、ユーザーがフローチャートを描き、提供されているほぼすべての図形にコーナーラジアスを適用できるサイトを見つけました。それはとてもスムーズに動作し、私は彼らがそれをやった方法を釘付けにすることはできません。 リンク：https://www.lucidchart.com/（試しボタン）

今のところ、私はちょっと無知ですが、私は数学で平凡に思っています。おそらく誰かが正しい方向に私を押して、いくつかの経験を共有できますか？

ありがとうございます。

BTW。このプロジェクトではパフォーマンスが重要です。図面の出力はSVG形式でなければなりません。

Answer 1

出発点はusing-svg-curves-to-imitate-rounded-cornersです。原則は、すべての角を簡略相対キュービック（s）で変換することです。この例は非常に基本的なもので、2つの可能なコーナーケースでのみ動作します。

このコーナーのようなコーナーを展開すると、他のパスセグメントもカバーするように展開することができます。すべてのセグメントにはカーブ上の座標点があり、セグメントをsセグメントに置き換える必要があります。数学はこの解の興味深い部分です。

Answer 2

私も同様の問題を抱え、簡単な解決策を見つけることができませんでした。私は、Adobe Illustratorの操作に基づいて、かなり一般的なコーナーラウンディング機能を作成しました。これは、円弧の代わりにベジェ曲線を使用しますが、私は結果がかなりまともだと思います。

SVGイメージの座標空間に指定された半径で、またはコーナーとその近傍間の距離の端数として丸めをサポートします。

これを使用するには、丸めを行います。プロジェクト内のjsと関数を呼び出す：

roundPathCorners(pathString, radius, useFractionalRadius) 

コードといくつかのテストのパスはここにある：http://embed.plnkr.co/kGnGGyoOCKil02k04snu/preview

これはPlnkr例からレンダリング方法です：

Answer 3

にもかかわらず、この質問はしばらくお待ちしており、一部の方はこの解決方法を試してみてください。

var BORDER_RADIUS = 20; 

function roundedPath(/* x1, y1, x2, y2, ..., xN, yN */){ 
    context.beginPath(); 
    if (!arguments.length) return; 

    //compute the middle of the first line as start-stop-point: 
    var deltaY = (arguments[3] - arguments[1]); 
    var deltaX = (arguments[2] - arguments[0]); 
    var xPerY = deltaY/deltaX; 
    var startX = arguments[0] + deltaX/2; 
    var startY = arguments[1] + xPerY * deltaX/2; 

    //walk around using arcTo: 
    context.moveTo(startX, startY); 
    var x1, y1, x2, y2; 
    x2 = arguments[2]; 
    y2 = arguments[3]; 
    for (var i = 4; i < arguments.length; i += 2) { 
     x1 = x2; 
     y1 = y2; 
     x2 = arguments[i]; 
     y2 = arguments[i + 1]; 
     context.arcTo(x1, y1, x2, y2, BORDER_RADIUS); 
    } 

    //finally, close the path: 
    context.arcTo(x2, y2, arguments[0], arguments[1], BORDER_RADIUS); 
    context.arcTo(arguments[0], arguments[1], startX, startY, BORDER_RADIUS); 
    context.closePath(); 
} 

トリックは、最初の行の途中で開始（および停止）し、と非常にうまく記述されているarcTo関数を使用します。

これで、すべての図形をポリゴンとして表現する方法を見つけなければなりません。