Рисование половины пути Безье в Рафаэле - PullRequest
Новая
       51

Рисование половины пути Безье в Рафаэле

5 голосов
/ 12 января 2011

Допустим, у меня есть кубический путь Безье следующим образом (отформатированный для использования с функцией пути Рафаэля):

M55 246S55 247 55 248

Просто пример. Это было взято из моего приложения для рисования, где я использую курсор для рисования линии, когда пользователь удерживает кнопку мыши, как карандаш или маркер. Я использую событие jmery mousemove, чтобы нарисовать линию между двумя точками каждый раз, когда пользователь перемещает мышь. Существует еще одна (контрольная точка), которая берется до рисования линии, чтобы можно было создать кривую Безье.

Вот мой вопрос: возможно ли заставить Рафаэля нарисовать только половину заданного пути? Мне известна функция getSubpath (), но если я правильно понимаю кривые Безье, вычислить второй аргумент будет довольно сложно. Проблема с функцией animate заключается в том, что она создает двойные линии (то есть создает изогнутую линию, которую я хочу, и квадратную линию вокруг нее, которая не должна отображаться, возможно, из-за того, что мышь перемещается быстрее, чем может справиться анимация ).

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

Ответы [ 3 ]

3 голосов
/ 13 января 2011

Это немного грязно, но, возможно, это ответит на это: 

line[line.length] = paper.path(drawPath); //drawPath being the fill line length 

//get a subpath, being half the length of your bezier curve
subPath = line[line.length - 1].getSubpath(0, line[line.length - 1].getTotalLength()/2);

//remove the full-length bezier curve
line[line.length - 1].remove();

//Draw your new line
line[line.length - 1] = paper.path(subpath);

Честно говоря, это довольно неэффективно. Но я не могу придумать лучшего способа сделать это. Вы не можете просто захватить касательную и разделить пополам, поскольку кривая Безье будет длиннее длины касательной (по мере того, как летит ворона). Это означает, что вы должны обработать строку через Rapheal, а затем получить подпуть на половину длины.

1 голос
/ 12 января 2011

Можно вычислить среднюю точку, не зная каких-либо функциональных возможностей в Raphael, которые позволят вам сократить Безье пополам.

Судя по этим командам, это стандартная разметка SVG (см. Спецификацию SVG длялучше понять это: http://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands)

M => Переместить в абсолютную позицию 55,24 S => Сглаживать кривую до абсолюта 55,247 55,248

Сглаженную кривую можно переписать как стандартную CurveTo или Cесли вы хотите, S - это только сокращение от него, и вы можете легко вычислить центральную точку.

0 голосов
/ 12 января 2011

Разделить кривую Безье пополам - это просто математика, ничего сложного.Вам могли бы помочь расширения пути для Raphaël , и было бы довольно просто добавить туда метод для расщепления.

Часть "немного математики" можетиспользуйте алгоритм Де Кастелау для расщепления кривой в любой заданной точке.

...