Polare Transformation in CSS3?

Question

eine Linie zu einem Ring Drehen ist eine einfache Aufgabe in Grafikprogrammen wie GIMP:

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

Ich versuche zu arbeiten, wenn es möglich ist, den gleichen Effekt in CSS zu erzeugen.

So arbeitete ich Sie folgendes:

• Der obige Algorithmus ordnet x zu r und y zu θ
• Um dies zu tun, x auf den Bereich von [0,w/2] skaliert wird, mit w wobei die Breite das Bild
• Auch y wird auf den Bereich von [0,2π]
• skaliert, um t Polarkoordinaten zurück in kartesische Koordinaten transformieren: xc = rp*cos(θp) und yc = rp*sin(θp)
• Das Ergebnis wird dann so übersetzt, dass der Ursprung in der Mitte des Bildes liegt. So
• haben wir:

 

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

Dies alles schön und gut, aber wie kann ich produzieren eine solche in CSS verwandeln? Vermutlich ist keines der Schlüsselwörter nützlich, also muss es eine Matrix-Transformation sein. Nun, ich habe keine Ahnung, wie man aus den beiden obigen Gleichungen eine Matrix zusammensetzt, geschweige denn, wie man sie in einer CSS-Transformation darstellt.

Kann mir jemand bei diesem letzten Schritt helfen?

Answer 1

Ich habe nie mit CSS-Transformationsmatrizen gearbeitet, aber ich denke, was Sie wollen, ist nicht möglich. Mit Transformationsmatrizen machen Sie eine lineare Transformation. Lineare Transformationen IMMER eine gerade Linie auf eine gerade Linie oder auf 0 setzen. Take a look at Wikipedia for more information.

So ist es unmöglich, eine gerade Linie zu einem Kreis mit Matrizen abzubilden.

Answer 2

Zumindest kann man 2 symmetrische Kurve dritter Ordnung Bezier machen Verwendung

Y (t) = (t^3, t^2, t, 1) * M * (P0, P1, P2, P3

)

t - Zeit

P0 - P3 Kontrollpunkt koordiniert. Dieser Vektor muss vertikal sein. Ich kann nicht vertikalen Vektor in diesem Herausgeber machen.

Y (t) - Kurve Koordinaten

M - 4 * 4 Matrixreihe 1 (-1,3, -3,1), Reihe 2 (3, -6, -3,0), Reihe 3 (-3,3,0,0) Zeile 4 (1,0,0,0)

Jetzt brauchen Sie nur noch eine Funktion, die Kontrollpunkte von Ihrer Linienkoordinate definiert.