Raphael JS對所選對象進行的自由變換

我正在嘗試使用Raphael.js動態創建對象。例如： -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(); 
}

但我很努力的事件處理程序添加到每個對象，將顯示在手柄已被點擊的形狀，並將其隱藏在其他人上。

我會非常感謝您的任何建議！

來源

2012-11-26 user1852851

你可以用一些示例代碼創建一個jsfiddle嗎？ – Neil

你有什麼麻煩，添加事件處理程序或編寫其內容來做你需要的？該處理程序將作爲參數傳遞單擊的對象。從那裏你應該能夠隱藏除了這個之外的所有東西。 –

解決了！

它比我想象的要複雜。我一直在擺弄關閉（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-26 20:07:52 user1852851

Raphael JS對所選對象進行的自由變換

回答

相關問題