Можно ли расположить элементы вдоль кривой, используя javascript / jQuery? - PullRequest
Новая
       3

Можно ли расположить элементы вдоль кривой, используя javascript / jQuery?

2 голосов
/ 14 октября 2011

Я работаю над дизайном, в котором я хотел бы расположить элементы заголовка вдоль кривой. Пример:

enter image description here

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

Мне любопытно, если кто-нибудь знает способ разместить динамическое число элементов вдоль кривой? Я предполагаю, что для этого потребуется способ указать уравнение, определяющее, какой должна быть кривая (обратите внимание, что кривая выше пика справа от центра ...), а затем расположить элементы, расположенные на нем равномерно.

Кто-нибудь делал это раньше? Любые рекомендации о том, с чего начать?

Ответы [ 3 ]

4 голосов
/ 14 октября 2011

Простой способ задать кривую - использовать кубик Безье.

enter image description here

function bez3(x0, y0, x1, y1, x2, y2, x3, y3, t)
{
    var x01 = x0 + t*(x1 - x0);
    var y01 = y0 + t*(y1 - y0);
    var x12 = x1 + t*(x2 - x1);
    var y12 = y1 + t*(y2 - y1);
    var x23 = x2 + t*(x3 - x2);
    var y23 = y2 + t*(y3 - y2);

    var x012 = x01 + t*(x12 - x01);
    var y012 = y01 + t*(y12 - y01);
    var x123 = x12 + t*(x23 - x12);
    var y123 = y12 + t*(y23 - y12);

    return {x: x012 + t*(x123 - x012),
            y: y012 + t*(y123 - y012)};
}

Кривая начинается с t=0, (x0, y0) по касательной к (x1, y1) и достигает t=1, (x3, y3) по касательной с (x2, y2).

Для t=0 функция возвращает начальную точку (x0, y0), для t=1 функция возвращает конечную точку (x3, y3). Значения t между 0 и 1 являются точками вдоль кривой (однако они плавно, но не одинаково разнесены). Вы можете считать t параметром «времени» точки, движущейся вдоль кривой.

После по этой ссылке можно увидеть интерактивную версию, реализованную в javascript / canvas (в примере используются буквы A, B, C и D вместо 0, 1, 2 и 3 для обозначения различных точек ).

1 голос
/ 19 октября 2011

Я использовал упомянутую функцию @ 6502 для создания плагина jQuery, который я использую для этого. Поскольку количество элементов, которые должны быть размещены на кривой, изменяется динамически, использование плагина, применяемого к селектору, работает хорошо. Это также помогает в создании уравнения кривой.

Вы можете найти его здесь:

1 голос
/ 14 октября 2011

Вы можете использовать формулу кривой и абсолютного позиционирования. Напишите функцию, для которой данный X вернет вам Y, сделайте так, чтобы эта функция возвращала Y как нечто искривленное (посмотрите ваши старые книги по геометрии или триггерам). Теперь итерируйте ваши элементы, давая определенный промежуток между значениями X ваших элементов. X = слева, Y = сверху.

См. http://fancythought.blogspot.com/2011/06/love-formula-heart-shaped-curvy-graph.html для формулы ...

Вы также можете использовать относительное позиционирование на родительском элементе, чтобы обеспечить лучшее размещение (относительное сделает абсолютное положение элементов относительно родительского элемента).

...