проекция точек управления кривой Безье

Question

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

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

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

Answer 1

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

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

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

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