web-dev-qa-db-ja.com

raphael.js-カスタム属性

ラファエル要素のカスタム属性を定義することは可能ですか？

例えば.

r.circle(25,50,10).attr({fill:'#b71e16', stroke:'#71140f', 'my_custom_attribute':'a value'});

これが必要な理由は、要素のセット全体に対して非常に複雑なアニメーションを実行したいので、各要素の元のy座標をどこかに保存したいからです。

svgraphael
24
boz

必要なカスタム属性は次のとおりです。

  1. 記録および取得する任意のデータの単純なストア？
  2. 変更時にカスタムアクションを実行する必要がある属性（Raphaelの.attr()および.animate()）？
  3. ページ/ DOMの出力SVG/VMLマークアップの属性に強制したいものはありますか？ （通常は推奨されませんが、必要な場合もあります）

1.カスタムデータの保存と取得

Raphaelに任意のデータを格納するための公式の意図された方法は、.data()関数を使用することであると99％確信しています。

var circle = r.circle(25,50,10).attr({fill:'#b71e16', stroke:'#71140f'});
// set it
circle.data('custom-attribute', 'value');

// get it
data = circle.data('custom-attribute');
alert(data);

Raphael 2.1以降、これは要素に対して機能することに注意してくださいsetsではありません。セットにデータを割り当てる必要がある場合、データをforループで設定し、someSet[0].data()で取得する傾向があります。これは少し手間がかかりますが、機能します。

迷惑なことに .dataのドキュメント は（執筆時点で）それが何のためにあるのかについては何も述べていません...しかし、jQueryの.data()、HTML5のdata-*などすべてがこの目的を持っており、このように使用します。 SO他の人はこのように使用することを意図していると話します なので、私はかなり自信があります。これは、Raphaelオブジェクトに任意のデータを添付するための意図された方法です。

2. attr()またはanimate()によってトリガーされるカスタム関数

Raphael属性のように動作するカスタム属性が必要な場合-attrまたはanimate（Raphaelフックのようなもの）を使用して変更されたときに関数または変換をトリガーします-それが 紙）です。 customAttributes はです。これは、そのpaperオブジェクト内の任意の要素に名前付きカスタム属性が設定されるたびに実行される関数を定義します。戻りオブジェクトは、要素の標準属性に適用されます。

公式ドキュメントには、これに非常に役立つ例がいくつかあります。これを適合させたものを次に示します。

// A custom attribute with multiple parameters:
paper.customAttributes.hsb = function (h, s, b) {
    return {fill: "hsb(" + [h, s, b].join(",") + ")"};
};
var c = paper.circle(10, 10, 10);
// If you want to animate a custom attribute, always set it first - null isNaN
c.attr({hsb: "0.5 .8 1"});
c.animate({hsb: [1, 0, 0.5]}, 1e3);

各customAttribute実行内のthisは、attrが設定されているRaphaelオブジェクトであることに注意してください。これの意味は...

3.ブラウザのSVGまたはVMLマークアップにカスタム属性を強制する

Raphaelはこれを実際にはサポートしていないため、本当に必要な場合にのみこれを実行してください。しかし、Raphaelがサポートしていないマークアップで本当にneedする場合は、attrとanimatepaper.customAttributesとelement.nodeを使用する（element.nodeのドキュメントはほとんど役に立たないことに注意してください " それを台無しにしないでください "-それを台無しにすべきではない理由は、それですSVGまたはVML要素を直接提供します。つまり、Raphaelはユーザーが行った変更を認識しないため、Raphaelオブジェクトが制御する要素と同期しなくなり、問題が発生する可能性があります。注意しない限り、 、およびこのような手法を使用します...）。

これは、SVGプロパティdyを設定する例です（jQueryも使用されていると仮定すると、jQueryは必須ではありませんが、より便利です）。これにより、Raphaelテキストの行間隔を制御できます（注-サンプルコードはまだありません） VML/IEでテスト済み。VMLモードで機能しない場合は更新されます）：

ライブjsfiddleの例

paper.customAttributes.lineHeight = function( value ) {
    // Sets the SVG dy attribute, which Raphael doesn't control
    var selector = Raphael.svg ? 'tspan' : 'v:textpath';
    var $node = $(this.node);
    var $tspans = $node.find(selector);
    $tspans.each(function(){
        // use $(this).attr in jquery v1.6+, fails for SVG in <= v1.5
        // probably won't work in IE
        this.setAttribute('dy', value );
    });
    // change no default Raphael attributes
    return {};
}
    // Then to use it...
    var text = paper.text(50,50,"This is \n multi-line \n text");
    // If you want to animate a custom attribute, always set it first - null isNaN
    text.attr({lineHeight: 0});
    text.animate({lineHeight: 100},500);
41
user56reinstatemonica8

私はあなたができると思います：

var circle = r.circle(25,50,10).attr({fill:'#b71e16', stroke:'#71140f'});

その後

circle["custom-attribute"] = value;

お役に立てれば。

3
alvomenyet

はい、次のことができるはずです。

.attr({title: value});

もちろん、titleは設定または作成する属性の名前であり、valueは値である必要があります。もちろん、問題のラファエル要素はattrの受信者になります。

0
LeakyBucket