0

私はRaphaelフレームワークを介してsvg機能を試しています（パスドキュメントはここにあります）。新しいパスを作成するとき、またはすでに作成されているパスを確認するときは、フォーマットの仕様を常に調べなければならないため、パス文字列を作成するのは非常に面倒です。このプロセスを簡素化するフレームワークはありますか？たとえば、次のようなものを書く必要はありません。

function pathStringForBoxWithQuad(x1, y1, x2, y2) {
    var edgeLength = 8;
    var str = "M " + (x2 + edgeLength) + " " + y1; // move to top right
    str += " L " + x1 + " " + y1; // line to top left
    str += " L " + x1 + " " + y2; // line to bottom left
    str += " L " + (x2 + edgeLength) + " " + y2; // line to bottom right
    str += " Q " + x2 + " " + (y1 + (y2 - y1) / 2) + " " + (x2 + edgeLength) + " " + y1; // quadratic back to top right
    str += " Z";
    return str;
}

次のようなものを書くことができますが、同じ文字列が返されます。

function pathStringForBoxWithQuad(x1, y1, x2, y2) {
    var edgeLength = 8;
    var str = new SVGPathString()
            .moveTo(x2 + edgeLength, y1)
            .lineTo(x1, y1)
            .lineTo(x1, y2)
            .lineTo(x2 + edgeLength, y2)
            .quadTo(x2, (y1 + (y2 - y1) / 2), x2 + edgeLength, y1 );
    return str;
}

2番目の方法のようなものが人気のあるフレームワークに存在しますか？このタイプのパス構築は、読者にとって非常に使いやすいと思います。

4

3 に答える 3

1

私も似たようなものを探していますが、今のところ、Underscore.js を使用して SVG コマンドのテンプレートを作成することになりました。何かのようなもの..

var commands = {
    line: _.template('M<%= x1 %>,<%= y1 %> L<%= x2 %>,<%= y2 %>'),
  .....
}
....
commands.line({
    x1: 0,
    y1: 0,

    x2: 0,
    y2: 10        
})
于 2012-05-23T20:44:47.193 に答える
1

あなたが望むものは、SVG Tiny 1.2のSVGPath APIに少し似ていますが、文字列化はありません。これらのパス オブジェクトは、シリアル化に時間を浪費するためのものではなく、直接割り当てられるためのものです。現在のすべてのブラウザーの中で、SVGPath API は Opera AFAIK によってのみ実装されています。

ただし、SVG WG は SVG2 のパス API の改善を検討しているため、将来的にはより良いものになることを願っています。

于 2012-05-24T08:48:47.343 に答える
0

SVG DOM は常にあります。

  var path = document.getElementById("<pathId>");
  var segments = path.pathSegList;

新しいパス セグメントを作成する必要がある場合は、次のようなメソッドを使用する必要があります。

var newSegment = path.createSVGPathSegArcAbs(...)

それを追加するには、segments.appendItem または segment.insertItemBefore を呼び出します。詳細については、 http://www.w3.org/TR/2003/REC-SVG11-20030114/paths.html#DOMInterfacesを参照してください。

于 2012-05-23T21:20:27.020 に答える