javascript - 选定对象上的 Raphael JS 自由变换

Question

我正在尝试使用 Raphael.js 动态创建对象。例如:

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

然后我想对每个形状使用自由变换，但隐藏边界框和 handle ，除非单击单个形状。到目前为止，我已经遍历了数组中的每个形状，应用了自由变换并隐藏了 handle :

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

但我正在努力为每个对象添加一个事件处理程序，该处理程序将在已单击的形状上显示 handle ，并将其隐藏在其他形状上。

如果有任何建议，我将不胜感激!

Answer 1

解决了!

它没有我想象的那么复杂。我一直在搞乱闭包(Javascript 不是我的第一语言)，但我的解决方案是:

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

这似乎不是一个非常优雅的解决方案，但它可以完成工作。有没有更好的办法？