CSS3中的極座標變換？

Question

打開一條線成環是在圖形程序如GIMP一個簡單的任務：

Filter ⇒ Distorts ⇒ Polar Coordinates http://adamhaskell.net/img/transform.png

我試圖找出是否有可能產生在CSS同樣的效果。

所以我計算出以下內容：

• 上述算法映射x到r並y到θ
• 爲此，x被縮放到的[0,w/2]的範圍內，w是的寬度圖片
• 另外，y縮放到範圍[0,2π]
• To t ransform極座標回直角座標：然後xc = rp*cos(θp)和yc = rp*sin(θp)
• 結果平移，原產地是在圖像的中心。
• 因此，我們有：

 

x' = (x/2)*cos(y/h*2π) + w/2; 
y' = (x/2)*sin(y/h*2π) + h/2; 

這是所有罰款和花花公子，但我怎麼能產生這樣的CSS變換？據推測，沒有任何關鍵字是有用的，所以它必須是一個矩陣變換。那麼，我不知道如何從上面的兩個公式中構建矩陣，更不用說如何在CSS變換中表示它。

任何人都可以幫助我完成最後一步嗎？

Answer 1

我從來沒有使用CSS變換矩陣，但我認爲你想要的是不可能。 使用變換矩陣，您可以執行線性變換。線性變換總是將一條直線映射到一條直線或者變爲0. Take a look at Wikipedia for more information。

所以這是不可能的繪製直線使用矩陣一圈。

Answer 2

至少可以使2個對稱三階貝塞爾曲線 使用

Y（T）=（T^3，T^2，T，1）* M *（P0，P1，P2，P3 ）

t時間

P0-P3控制點座標。這個矢量必須是垂直的。我不知道如何在這個編輯器中製作垂直矢量。

Y（t）的 - 曲線座標

米 - 4 * 4矩陣行1（-1,3，-3,1）行2（3，-6，-3,0）行3（ -3,3,0,0）第4行（1,0,0,0）

現在，你只需要一個什麼樣的功能從線座標定義控制點。