如何將Raphael中的多邊形轉換爲圓形？

我想變身任意形狀成拉斐爾了一圈，我不想過度扭曲，所以我就指望原來的路徑中的節點，創建具有相同數量的節點的新路徑。如何將Raphael中的多邊形轉換爲圓形？

到目前爲止，我已經能夠到新的路徑安排與相同數量的節點的多邊形，但是我的數學失敗我，當我要調整三次Bezier點，完成一個循環。我知道我應該計算切線，但我不知道如何繼續。這裏是我的代碼：

var path, paper, circle, radius; 
radius = 150; 
paper = Raphael("canvas", radius*4, radius*4); 
path = drawCircle(6) //can be any number 

function drawCircle(nodes){ 
    newPath = []; 
    for(x=0; x<nodes; x++) { 
     deg = (x/nodes)*360; 
     if(x==0) { 
      newPath.push("M " + Math.sin(deg*Math.PI/180)*radius + " " + Math.cos(deg*Math.PI/180)*radius); 
     } 
     else { 
     newPath.push(
       "C " + Math.sin(deg*Math.PI/180)*radius 
       + " " + Math.cos(deg*Math.PI/180)*radius 
       + " " + Math.sin(deg*Math.PI/180)*radius 
       + " " + Math.cos(deg*Math.PI/180)*radius 
       + " " + Math.sin(deg*Math.PI/180)*radius 
       + " " + Math.cos(deg*Math.PI/180)*radius 
       ) 
      } 
    } 
    newPath.push("Z") 
    console.log(newPath) 
    paper.path(newPath).attr({"fill": "#000"}).translate(200, 200) 
}

下面是一個的jsfiddle嘗試一下： http://jsfiddle.net/zeYtT/

來源

2011-10-20 Duopixel

下面是更正後的代碼。請注意，您可以使用arc path命令而不是SVG中的curve命令。還要注意，下面的代碼將第一個節點和最後一個節點視爲相等，給它看起來它會生成一個額外的節點。這假定所有的任意形狀都是封閉的，也就是說，它們的第一個節點和最後一個節點是相等的，不能簡單地通過「關閉路徑」命令（Z）來保證。

var path, paper, circle, radius; 
radius = 150; 
paper = Raphael("canvas", radius * 4, radius * 4); 
path = drawCircle(8) //can be any number 

function drawCircle(nodes) { 
    var newPath = [] 
    for (var i = 0; i <= nodes; i++) { 
     var deg = (i*1.0/nodes) * 360; 
     var x = Math.cos(deg * Math.PI/180) * radius 
     var y = Math.sin(deg * Math.PI/180) * radius 
     if (newPath == 0) newPath.push("M " + x + " " + y) 
     else newPath.push("A " + (radius) + "," + (radius) + ",0,0,1," + x + "," + y) 
    } 
    newPath.push("Z") 
    console.log(newPath) 
    paper.path(newPath).attr({ 
     "fill": "#000" 
    }).translate(200, 200) 
}

來源

2011-10-20 23:49:55

完美！非常感謝。唯一讓我感到困惑的是，當被動畫時，形狀會翻轉過來，然後我注意到你將Math.cos賦值給x，並將它賦值給y。我不知道哪一個是正確的，但他們似乎表現得一樣。 – Duopixel

'正確'的方法是用cos爲x，y爲sin。我比較字母的實際形狀（COS - > 0 - > x和罪惡 - > I - > Y）記住它:)

來源

2013-04-18 08:33:15 extrapixel

如何將Raphael中的多邊形轉換爲圓形？

回答

相關問題