Question

我正在尝试使用Raphael.js来动态创建对象。 e.g：

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

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

我非常感谢任何建议！

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

这似乎不是一个非常优雅的解决方案，但它确实起到了作用。还有更好的方法吗？

Raphael JS对所选对象的自由变换

1 个答案: