raphael.js - attributs personnalisés

Est l'attribut personnalisé que vous souhaitez:

1. Un simple magasin de données arbitraires, à être enregistrées et récupérées?
2. Un attribut où une coutume des mesures doivent être prises lorsqu'il est changé (comme les attributs contrôlé avec Raphaël .attr() et .animate() )?
3. Quelque chose que vous voulez forcer sur les attributs de la sortie SVG /VML balisage sur la page /DOM? (normalement pas recommandé, mais parfois nécessaires)

1. Personnalisée des données de stockage et de récupération

Je suis sûr à 99% que l'officiel, destiné moyen de stocker des données arbitraires dans Raphaël est d'utiliser le .data() fonction, par exemple

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);

Noter que Raphaël 2.1 cela fonctionne pour les éléments, pas les séries. Quand j'en ai besoin pour affecter des données à un jeu, j'ai tendance à le mettre avec un for boucle et l'obtenir avec someSet[0].data() - un peu de cludge, mais il fonctionne.

Fâcheusement la documentation de .les données ne dit rien à propos de ce qu'elle est (au moment de la rédaction)... mais .data() en jQuery, data-* en HTML5, etc etc tous ont ce but, en l'utilisant comme cela fonctionne, et d'autres sur DONC en parler étant destinés à être utilisés comme ceci, donc je suis assez confiant que c'est le but de la méthode pour la fixation arbitraire des données à Raphaël objets.

---

2. Fonctions personnalisées déclenchée par attr() ou animate()

Si vous avez besoin d'un attribut personnalisé qui se comporte comme Raphaël attributs - déclenchement d'une fonction ou d'une transformation lorsqu'elles sont modifiées à l'aide de attr ou animate (comme une sorte de Raphaël crochet) - c'est ce que papier.customAttributes est pour. Il définit une fonction qui est exécutée à tout moment le nommé personnalisé de l'attribut est défini pour n'importe quel élément que paper objet. Le retour de l'objet est appliquée à l'élément attributs standard.

Officiel docs ont un peu assez d'exemples utiles pour celui-ci, voici un adapté à l':

//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);

Noter que this au sein de chaque customAttribute d'exécution est le Raphaël objet pour lequel l'attribut est défini. Cela signifie...

---

3. Forcer l'attribut personnalisé dans le SVG ou VML balisage dans le navigateur

Raphaël n'a pas vraiment d'appui, de sorte que si vous avez vraiment, vraiment besoin. Mais si vraiment vous ne besoin quelque chose dans le balisage que Raphael ne prend pas en charge, vous pouvez créer un rudimentaire de contrôle pour la manipulation à l'aide de attr et animate en utilisant paper.customAttributes et element.node (notez que la documentation element.node est à peu près juste le très inutile "Ne salissez pas avec elle" - la raison pour laquelle vous ne devriez pas jouer avec il est, il vous donne le SVG ou VML élément directement, ce qui signifie que Raphaël ne sais pas, des changements que vous faites pour elle, ce qui peut mettre votre Raphaël objet de la synchronisation avec l'élément qu'il contrôle, potentiellement casser des choses. Sauf si vous êtes prudent, et d'utiliser une technique comme ça...).

Voici un exemple (en supposant que jQuery est également utilisée, jQuery n'est pas indispensable mais est plus pratique) qui définit la SVG propriété dy, qui vous permet de contrôler l'espacement des lignes de Raphaël texte (note - exemple de code pas encore testé en VML/IE. sera mise à jour si elle ne fonctionne pas dans VML mode):

Live jsfiddle exemple

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);

Oui, vous devriez être en mesure de faire ce qui suit:

.attr({title: value});

Bien sûr, le titre est le nom de l'attribut que vous souhaitez définir ou créer de la valeur et doit être la valeur. Bien sûr, le raphaël de l'élément en question serait-ce que le récepteur pour l'attribut.