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

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

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

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


canvas curve bezier
person Gor    schedule 28.01.2016    source источник
comment
Уточните, пожалуйста ... :-) Под квадратным Безье вы подразумеваете квадратичный Безье? Вы хотите рассчитать среднюю контрольную точку на основе положения мыши вот так?   -  person markE    schedule 28.01.2016

Ответы (1)


arrow_upward
0
arrow_downward

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

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

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

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

person Mike 'Pomax' Kamermans    schedule 28.01.2016