如何使用Raphael.js旋轉div？

我是Raphael的全新品牌，我真的陷入困境，我想用Raphael旋轉div和它的內容，使用按鈕。如何使用Raphael.js旋轉div？

理想情況下，我想要一個平滑的動畫，當點擊按鈕時，從0度到-90度，然後當再次單擊該按鈕時，動畫會反轉。我想我會在點擊鼠標的時候改變id或class，這樣我就可以爲這兩個動畫使用相同的按鈕。這是明智的嗎？

我真的想一些幫助，請，我的沙盒是http://jsbin.com/isijo/，你可以在http://jsbin.com/isijo/edit

許多在此先感謝編輯它的任何幫助。

來源

2009-11-09 Zander

你好，歡迎來到拉斐爾！

我一直在看拉斐爾超過幾個月，雖然文檔不是很全面，但軟件非常出色。

我一直在以各種方式將Rap與Raphael物體混合在一起，並對「有效」和「無效」產生了「感覺」。

我建議你不要嘗試旋轉div，而是（而不是）拉斐爾的對象。

首先你可以做一個shiney一套使用這種「tweakable」下面的代碼拉斐爾按鈕的..

var bcontrols = new Array(); 
var yheight = 300; 

for (var i = 0; i < 3; i++) { 
    bcontrols[i] = paper.circle(15 + (35 * i), yheight, 15).attr({ 
     fill: "r(.5,.9)#39c-#036", 
     stroke: "none" 
    }); 

    bcontrols[i].shine = paper.ellipse(15 + (35 * i), yheight, 14, 14).attr({ 
     fill: "r(.5,.1)#ccc-#ccc", 
     stroke: "none", 
     opacity: 0 
    }); 

    bcontrols[i].index = i; 
    bcontrols[i].shine.index = i; 

    bcontrols[i].shine.mouseover(function (e) { 
     this.insertBefore(bcontrols[this.index]); 
    }); 

    bcontrols[i].mouseout(function() { 
     this.insertBefore(bcontrols[this.index].shine); 
    }); 

    /* Called from Raphael buttons */ 
    bcontrols[i].click(function() { 
     alert("Hello you just clicked " + this.index); 

    }); 
}

接下來，您需要了解更多關於旋轉設置：

var s = paper.set(); 

s.push(paper.rect(10, 10, 30, 30, 10).attr({fill:'red'})); 

s.push(paper.rect(50, 10, 30, 30, 5).attr({fill:'blue'})); 

s.push(paper.rect(90, 10, 30, 30).attr({fill:'orange'})); 

s.animate({rotation: "360 65 25"}, 2000);

這顯示最後一行上「set」的旋轉程度和旋轉中心。

我額外拉斐爾資源的網站，目的是補充資料（除其他事項外）：

http://www.irunmywebsite.com/raphael/raphaelsource.html

繼承人在那裏你可以運行上面的2個的代碼示例沒有改變：

http://raphaeljs.com/playground.html

我希望這有助於...

來源

2009-11-10 18:23:02 Chasbeen

感謝您的輸入，但我需要旋轉包含圖像和其他信息的div，這些都可以成爲Raphael對象嗎？內容需要動態，因爲該網站將不斷更新。我基本上想要做旋轉圖像示例http://raphaeljs.com/image-rotation.html中的東西，但使用div和它的內容。你有看到？再次感謝 – Zander 2009-11-11 12:15:30

Zander，有辦法將DIV旋轉到任何特定的角度，但它們不是跨瀏覽器。如果是我，我會使用Raphael Objects。我唯一不能做的事情是有一個有角度的文字，但我不認爲有這些需求。我的網站上有10個例子： http://www.irunmywebsite.com/raphael/raphaelsource.html 和一個語法生成器也有.. – Chasbeen 2009-11-13 20:07:56

據我所知，沒有辦法將div轉換爲Raphael對象。由於Raphael旋轉命令僅爲Raphael對象定義，所以最好的選擇是在Raphael中創建div（圖像，文本，按鈕和全部）的主要元素而不是HTML，將它們放在一個集合中，該集合是一個Raphael對象，旋轉集合。

來源

2009-12-24 08:06:12 Ryan

諮詢Rotate a div in CSS and in IE filters。這與SVG不一樣，所以如果你需要更多的佈局魔術，Raphael的形狀可能是一條可行的路。你應該可以和Raphael一起使用JQuery來操縱你的窗口，但是我對Raphael來說是全新的，從來沒有這樣做過。

來源

2011-10-25 23:59:34

如何使用Raphael.js旋轉div？

回答

相關問題