Проекция контрольных точек кривой Безье

Question

Я использую квадратную кривую Безье. Для рисования я использую html5 canvas. Я сделал простую функцию, которая показывает мне 2 контрольные точки, и я могу легко изменить кривую, просто перетаскивая контрольные точки. Я сделал что-то вроде этого

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

Как я могу от 1 до 1 проектировать контрольные точки на кривой?

Answer 1

Прежде всего: сайт cubic-bezier.com показывает кубические кривые, а не квадратные кривые (которые на самом деле называются квадратичными кривыми).

О том, как вы проецируете контрольную точку: вы грубо форсируете ее Я опишу подробности на http://pomax.github.io/bezierinfo/, но суть в том, что вы просто бегаете по кривой с увеличением t значение, пока вы не найдете кратчайшее расстояние до точки вне кривой.

Но на самом деле это не то, что вы спрашивали, это звучит так. Вы спрашивали о том, как изменить форму кривой на основе перетаскивания точек на самой кривой, что на самом деле не имеет никакого отношения к проецированию контрольных точек на кривую. Управление кривой, основанное на перетаскивании точки на кривой, - гораздо больше работы, чем проект; полностью выполнимо, описано на http://pomax.github.io/bezierinfo/ (раздел, предшествующий этому, необходимо прочитать, если вы хотите реализовать это самостоятельно), но гораздо сложнее.

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