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 に答える