Линии переменной толщины в HTML5 Canvas

Question

[dom1n1k]

Существует ли JS-библиотека, умеющая рисовать по canvas-у линии переменной толщины?

Ну то есть например: в начале толщина 3px, в конце 5px, и чтобы она плавно менялась вдоль всей линии.

Для прямых это, в принципе, реализовать не очень сложно. А вот для кривых Безье решение нетривиально.

Comments

[Riateche]

Библиотеки я не нашел. Можно взять любую библиотеку и заменить в ней рисование точек/отрезков на рисование кругов нужного радиуса.

[dom1n1k]

Рисование кругов мне в голову приходило, но это всё же не решение, а костыль.
1. Для гарантированной гладкости линии круги нужно рисовать избыточно часто — это сильное снижение производительности.
2. Жирный, неравномерный антиалиасинг.
3. Невозможно нарисовать полупрозрачную линию.
И еще множество нюансов.
Прямую линию переменной толщины можно сэмулировать рисованием четырехугольника (вытянутой трапеции), а вот как быть с кривыми?..

[Nyarlathotep]

Вместо кругов — много четырехугольников? Длину каждого попробовать брать исходя из дельты изменения направления вектора касательной к кривой? Тогда и полупрозрачность можно будет, только возможно получение ступенчатых линий.

Answer 1

[lashtal]

ну, очевидный способ — разрезать кривую на много сегментов, каждый из которых будет немного толще предыдущего.

Comments

[dom1n1k]

Способ-то очевиден, неочевидна его реализация :)

Answer 2

[Keyten]

> Для прямых это, в принципе, реализовать не очень сложно

Присмотритесь к PaperJS: он умеет, например, рисовать пунктирные линии, превращать кривые Безье в нормальные отрезки и обратно.

P. S. Будет время, попробую что-нибудь подобное натворить…