Raphael JS Free Transformer sur l'objet sélectionné

Question

J'essaie d'utiliser Raphael.js pour créer dynamiquement des objets. .: par exemple

var paper = Raphael("canvas"); 
     var elements = []; 
     elements.push(paper.rect(20,30,100,12).attr({fill:"orange"})); 
     elements.push(paper.path("m200,200l280,200l290,290z").attr({fill: "rgb(213,111,5)"})); 
     elements.push(paper.ellipse(340,100,90,40).attr({fill:"hsb(0.5,0.9,0.9)"})); 

Je veux ensuite utiliser Free Transform sur toutes les formes, mais cacher la zone de délimitation et poignées à moins qu'une forme individuelle est cliqué. Jusqu'à présent, j'ai bouclé toutes les formes du tableau dans le tableau, appliqué Transformation et cachées les poignées:

for(var i in elements) { 
    var ft = paper.freeTransform(elements[i],{draw:['bbox']}) 
    ft.hideHandles(); 
} 

Mais je me bats pour ajouter un gestionnaire d'événements à chaque objet qui montrera les poignées sur la forme qui a été cliquée, et cachez-la sur les autres.

Je serais extrêmement reconnaissant pour tout conseil!

Answer 1

Résolu!

C'était moins complexe que je ne le pensais. J'avais été bricoler avec des fermetures (Javascript est pas ma langue maternelle), mais ma solution est:

var paper = Raphael("canvas"); 
var elements = []; 
elements.push(paper.rect(20,30,100,12).attr({fill:"orange"})); 
elements.push(paper.path("m200,200l280,200l290,290z").attr({fill: "rgb(213,111,5)"}));  
elements.push(paper.ellipse(340,100,90,40).attr({fill:"hsb(0.5,0.9,0.9)"})); 

//add Free Transform to all elements 
for(var i in elements) { 
    var thisShape = elements[i]; 
    var ft = paper.freeTransform(thisShape,{draw:['bbox']}); 
    ft.hideHandles(); 
    thisShape.click(function(){ 
    paper.forEach(function(el) { 
    if(el.freeTransform.handles.bbox != null) 
    el.freeTransform.hideHandles(); 
}); 
this.freeTransform.showHandles(); 
    }); 
} 

Cela ne semble pas être une solution très élégante, mais il fait le travail. Y a-t-il un meilleur moyen?