4

Raphael を使用していくつかの図形を作成しましたが、今度はそれらにテキストを入れたいと思いました。しかし、例から、テキストノードは紙にしか接続できず、svg 形状には接続できないように見えますか?

内部に異なるテキストを含む複数の図形を作成することはできますか?

私が使用していた例は次のとおりです。

paper.text(50, 50, "Raphaël\nkicks\nbutt!");
4

1 に答える 1

18

Raphael では、すべての描画要素 (形状、線、テキストなど) は、それを取り囲む紙オブジェクトの一部としてのみ存在します。それら自体には階層構造はありません。残念ながら、これらの形状にはテキスト属性もありません。そのため、正しい意味でテキスト ノードを形状要素に「接続」することはできません。

ただし、'Set' ノードを使用して、テキスト ノードがシェイプにアタッチされているように見せることができます。Set は、1 回の操作ですべてのメンバーに変換 (平行移動、回転など) を適用できる要素の配列です。したがって、1 つの長方形と 1 つのテキスト ノードを含むセットを作成した場合、そのセット要素を 1 つのエンティティとして扱うことができます。次に、そのセットの 2 番目のインスタンスを作成して、別の方法で処理できます。したがって、すべてのテキスト要素は技術的にはまだ紙のオブジェクトに属していますが、四角形に属しているように動作 (および表示) されます。

例えば：

var paper = Raphael(0, 0, 400, 400);
for (var i = 0; i < 10; i++)
{
    var group = paper.set();
    group.push(paper.rect(10, 10, 50, 20));
    group.push(paper.text(35, 18, "Hello"));

    group.translate(Math.random() * 350, Math.random() * 380);
    group.rotate(Math.random() * 90);
}

別のアプローチとして、ページ上に大量の個別の紙のオブジェクトを作成することにもかなりの成功を収めました。しかし、それはおそらくあなたが行きたい場所ではありません。

于 2009-09-22T12:40:26.180 に答える