18

数週間以内に開始しなければならないプロジェクトの情報を集めています。このプロジェクトには、ユーザーが定義済みの図形を追加したり、自分で図形を形成したりできるブラウザー ベースの描画ツールが含まれています。シェイプは選択可能で、自由に拡大縮小でき、Illustrator のような変換ツール (ハンドル) で回転できる必要があります。念頭に置いている定義済みの形状は、長方形、楕円、半楕円、(二等辺三角形) です。

これまでのところ、これを達成するには、RaphaelJS または FabricJS を考えていましたが... すべての形状 (ポリゴン/パス) は、特定のコーナー半径で描画する必要があります。また、スケーリング中にコーナー半径を維持する必要があるため、歪みは発生しません。ユーザーは、入力によって丸めを指定できます。

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

  • 私が言及した形状にコーナー半径を適用するための統一された数式はありますか? それとも、すべての形状をミニプロジェクト自体として扱う必要がありますか? パスやポリゴンで返したいので、SVGでもキャンバスでも描けます。
  • トランスフォームハンドルをドラッグすることによるすべてのスケールまたは回転操作は、更新された形状を取得するために（大規模な）計算を行うと思います。長方形は達成するのが最も簡単で、楕円を除いて、他のすべての形状は計算がはるかに難しくなります。プロセスをスピードアップする方法はありますか？

ユーザーがフローチャートを描画し、提供されているほぼすべての形状にコーナー半径を適用できるサイトを見つけました。それはとてもスムーズに機能するので、私は彼らがどのようにそれをしたかを釘付けにすることはできません. リンク: https://www.lucidchart.com/ (試すボタン)

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

前もって感謝します。

ところで。このプロジェクトではパフォーマンスが重要です。図面の出力は SVG 形式である必要があります。

4

3 に答える 3

2

出発点はusing-svg-curves-to-imulate-rounded-cornersです。原則は、省略形の相対立方体 (s) を使用してすべてのコーナーを変換することです。この例は非常に基本的なもので、考えられる 2 つのコーナー ケースでのみ機能します。

これをコーナー置換のように短縮形の相対キュービックで拡張すると、他のパス セグメントもカバーするように拡張できると思います。すべてのセグメントには曲線上の座標点があり、これをセグメントに置き換える必要がありsます。数学は、このソリューションの興味深い部分です。

于 2013-10-23T12:22:48.180 に答える
2

この質問はしばらく前から出回っていますが、立ち寄ってこの解決策を試す人もいるかもしれません:

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非常にうまく説明されている関数を使用することです。

次に、すべての形状をポリゴンとして表現する方法を「ただ」見つけなければなりません。

于 2015-01-21T15:29:16.847 に答える