Utilisation de Raphael JS pour créer des nœuds de texte

Question

J'ai créé quelques formes à l'aide de Raphael, et maintenant je voulais y mettre du texte. Mais, il semble, à partir des exemples, qu'un nœud de texte ne peut être attaché au papier et pas des formes de svg?

Est-il possible de créer plusieurs formes avec du texte différent à l'intérieur?

L'exemple que j'utilisais était:

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

Answer 1

Dans Raphaël, tous les éléments de dessin (formes, lignes, texte, etc.) existent uniquement dans le cadre de l'objet englobant papier. Il n'y a pas de structure hiérarchique en eux-mêmes. Il n'y a malheureusement pas d'attribut de texte pour l'une de ces formes. Un nœud de texte ne peut donc pas être "attaché" à un élément de forme au sens propre.

Toutefois, vous pouvez utiliser un noeud "Définir" pour donner l'apparence d'un nœud de texte attaché à une forme. Un ensemble est un tableau d'éléments où les transformations (translation, rotation, etc.) peuvent être appliquées à tous les membres en une seule opération. Donc, si vous avez créé un ensemble contenant un rectangle et un nœud de texte, vous pouvez les traiter comme une seule entité. Vous pouvez ensuite créer une seconde instance de cet ensemble et le traiter différemment. Ainsi, alors que tous les éléments de texte appartiennent encore techniquement à l'objet papier, ils se comportent (et apparaissent) comme s'ils appartenaient au rectangle.

Par exemple:

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

Comme une approche différente, j'ai aussi eu un succès raisonnable avec la création de grandes quantités d'objets en papier séparés sur une page. Mais ce n'est probablement pas là où vous voulez aller.