Transformada polar en CSS3? Volviendo

Question

una línea en un anillo es una tarea sencilla en programas gráficos tales como GIMP:

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

que estoy tratando de averiguar si es posible producir el mismo efecto en el CSS.

así que trabajé el siguiente:

• El algoritmo anterior mapas x a r y y a θ
• Para ello, x se escala a la gama de [0,w/2], con w siendo el ancho de la imagen
• También, y se escala a la gama de [0,2π]
• Para t Cambie las coordenadas polares de nuevo a cartesiano: xc = rp*cos(θp) y yc = rp*sin(θp)
• El resultado se traduce entonces para que el origen esté en el centro de la imagen.
• Así tenemos:

 

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

Esto es todo lo fino y elegante, pero ¿cómo puedo producir una transformación en tales CSS? Es de suponer que ninguna de las palabras clave es útil, por lo que tiene que ser una transformación de Matrix. Bueno, no tengo idea de cómo construir una matriz a partir de las dos ecuaciones anteriores, y mucho menos cómo representarla en una transformación CSS.

¿Alguien me puede ayudar en este último paso?

Answer 1

Nunca he trabajado con matrices de transformación CSS, pero creo que lo que quiere es no es posible. El uso de matrices de transformación hace una transformación lineal . Transformaciones lineales SIEMPRE trazar una línea recta a una línea recta oa 0. Take a look at Wikipedia for more information.

Por lo tanto, es imposible asignar una línea recta a un círculo con matrices.

Answer 2

Al menos se puede hacer 2 tercera orden simétrico curva de Bezier Usando

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

t - tiempo

P0 - P3 coordina los puntos de control. Este vector debe ser vertical. No sé cómo hacer un vector vertical en este editor.

Y (t) - coordenada curva

M - 4 * 4 matriz fila 1 (-1,3, -3,1) fila 2 (3, -6, -3,0) fila 3 (-3,3,0,0) fila 4 (1,0,0,0)

Ahora solo necesita una función que defina los puntos de control de su línea de coordenadas.