Полярное преобразование в CSS3?

Включение строки в кольцо - простая задача в графических программах, таких как GIMP:

Фильтр ⇒ Искажения ⇒ Полярные координаты http://adamhaskell.net/img/transform.png

Я пытаюсь разобраться, если можно создать тот же эффект в CSS.

Итак, я разработал следующее:

Вышеуказанный алгоритм отображает от x до r и y до θ
Для этого x масштабируется до диапазона [0,w/2], при этом w является шириной изображения
Кроме того, y масштабируется до диапазона [0,2π]
Чтобы преобразовать полярные координаты в декартовы: 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.

Может ли кто-нибудь помочь мне на этом последнем этапе?

Ответ 1

Я никогда не работал с матрицами преобразования CSS, но я думаю, что вы хотите не возможно. Используя матрицы преобразований, вы выполняете линейное преобразование. Линейные преобразования ВСЕГДА сопоставить прямую линию с прямой линией или 0. Посмотрите на Википедию для получения дополнительной информации.

Таким образом, невозможно сопоставить прямую линию с кругом с помощью матриц.

Ответ 2

По крайней мере, вы можете сделать 2 симметричную кривую Безье третьего порядка Использование

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

t - время

P0 - P3 координаты контрольных точек. Этот вектор должен быть вертикальным. Я не знаю, как сделать вертикальный вектор в этом редакторе.

Y (t) - координата кривой

M - 4 * 4 строка матрицы 1 (-1,3, -3,1) строка 2 (3, -6, -3,0) строка 3 (-3,3,0,0) строка 4 ( 1,0,0,0)

Теперь вам нужна только функция, которая определяет контрольные точки из вашей координаты линии.