Включение строки в кольцо - простая задача в графических программах, таких как 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.
Может ли кто-нибудь помочь мне на этом последнем этапе?
Я никогда не работал с матрицами преобразования CSS, но я думаю, что вы хотите не возможно. Используя матрицы преобразований, вы выполняете линейное преобразование. Линейные преобразования ВСЕГДА сопоставить прямую линию с прямой линией или 0. Посмотрите на Википедию для получения дополнительной информации.
Таким образом, невозможно сопоставить прямую линию с кругом с помощью матриц.
По крайней мере, вы можете сделать 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)
Теперь вам нужна только функция, которая определяет контрольные точки из вашей координаты линии.