RaphaelJS: tracer un chemin sur un autre élément SVG

Question

J'ai un conteneur 500x400px, où je travaille avec RaphaelJS pour gérer certains goodies SVG. J'ai chargé une image avec ce code:

var img = paper.image("images/image.jpg", 50, 200, 90, 110); 

Maintenant je veux dessiner un chemin relatif à cet élément. Comment dois-je faire? Si j'écris quelque chose comme:

var c = paper.path("M 18.00,79.75 C 18.00,79.50 52.50,79.75 52.50,79.75..."); 

Le chemin est créé par rapport au conteneur parent, et ne prend pas la bonne position sur mon image. Merci pour votre soutien

--- modifier ----

Ceci est mon tableau de bord avec son style:

#canvas { 
     float: left; 
     width: 500px; 
     height: 400px; 
     border: 1px solid #333; 
} 

<div id="canvas"></div> 

Et cela fait partie du code javascript:

// Creates canvas 500 × 400 inside canvas div 
var paper = Raphael(document.getElementById('canvas'), 500, 400); 
// Load an image at 50, 200 
var img = paper.image("images/image.jpg", 50, 200, 90, 110); 

Après cela, je voudrais remplir un chemin SVG, en le positionnant sur mon image. Si je vous écris quelque chose comme:

var c = paper.path("M 18.00,79.75 C 18.00,79.50 52.50,79.75 52.50,79.75..."); 

Ce chemin est créé sur le conteneur de #canvas, à partir de 0,0 coords. Comment faire?

Answer 1

Veuillez regarder dans ce violon http://jsfiddle.net/XRBRz/. Dans ce violon, imaginez le rectangle noir comme image. Le chemin d'escalier est tracé par rapport au rectangle noir, en traduisant le chemin vers l'origine du rectangle. Le chemin (cage d'escalier) reçoit également un clip-path ayant la même dimension que le rectangle noir, pour couper le chemin à l'extérieur du rectangle noir.

Answer 2

Il semble que vous pensiez que Raphael garde une référence à une position de stylo actuelle entre la création de formes, etc. Je ne pense pas que ce soit vrai ... Je crois que lorsque vous ajoutez un chemin, la position de départ de ce chemin est relatif à la toile 0,0. (Notez que la commande 'M' permet un déplacement relatif à 'm', mais je pense que cela ne fonctionne qu'après l'initiale dans une chaîne de chemin ... au début, il semble être absolu, indépendamment du cas)

Donc , si vous voulez démarrer le chemin à partir du coin supérieur gauche de l'image, démarrez la chaîne de chemin avec "M50,200" - pour le bas à droite, démarrez-le avec "M140,310".

Si vous souhaitez que le chemin d'accès reste attaché à l'image à ce stade, ajoutez-les à un ensemble. Mais c'est un autre article ... :-)