3

我正在尝试使用 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)"}));

然后我想在每个形状上使用自由变换，但除非单击单个形状，否则隐藏边界框和手柄。到目前为止，我已经遍历了数组中的每个形状，应用了自由变换并隐藏了句柄：

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

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

我将非常感谢任何建议！

4

1 回答 1

5

解决了！

它没有我想象的那么复杂。我一直在处理闭包（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();
  });
}

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

于 2012-11-26T20:07:52.997 回答