Поскольку встроенный Canvas поддерживает кривые Безье только третьего порядка, что мне делать, если я хочу добавить несколько контрольных точек? (Даже самые сложные кривые можно смоделировать с помощью Безье третьего порядка.) В то же время нам сложно очень интуитивно четко понять, насколько сильно мы можем установить контрольные точки для формирования кривой. мы хотим? Чтобы решить две вышеуказанные проблемы, похоже, в сообществе не существует решения N-уровня (js-версии), поэтому на этот раз автор очень серьезно относится к bezierMaker.js с открытым исходным кодом!
bezierMaker.js теоретически поддерживает генерацию кривых Безье N-порядка, а также предоставляет разработчикам испытательную площадку для добавления и перетаскивания контрольных точек для создания набора анимаций рисования. Разработчикам очень интуитивно понятно знать различные кривые генерации, соответствующие контрольным точкам в разных положениях.
Если вам нравится эта работа, добро пожаловать на звезды. Ведь звезды зарабатываются тяжелым трудом. .
Адрес проекта: здесь✨✨✨
Зачем нужен испытательный полигон?При рисовании сложных кривых Безье высокого порядка вы не можете знать точное расположение контрольных точек нужной вам кривой. При моделировании на тестовом поле значения координат контрольных точек можно получить в реальном времени. Полученные координаты точек можно преобразовать в массив объектов и передать в класс BezierMaker для генерации целевой кривой.
визуализации
Функция<script src=./bezierMaker.js></script>рисовать
На приведенном выше изображении показано использование тестового сайта. После получения точных координат контрольных точек через тестовый сайт вы можете вызвать bezierMaker.js, чтобы напрямую нарисовать кривую.
/** * DOM-объект холста Canvas * массив контрольных точек bezierCtrlNodesArr, включая координаты x, y * цвет цветовой кривой */var Canvas = document.getElementById('canvas')//Использовать собственный метод для реализации до уровня 3 var arr0 = [ {x:70,y:25},{x:24,y:51}]вар arr1 = [{x:233,y:225},{x:170,y:279},{x:240,y:51}]var arr2 = [{x:23,y:225},{x:70, y:79},{x:40,y:51},{x:300, y:44}]var arr3 = [{x:333,y:15},{x:70,y:79},{x:40,y:551},{x:170,y:279},{x:17,y:239} ]вар арр4 = [{x:53,y:85},{x:170,y:279},{x:240,y:551},{x:70,y:79},{x:40,y:551} ,{x:170,y:279}]var bezier0 = новый BezierMaker(canvas, arr0, 'black')var bezier1 = новый BezierMaker(canvas, arr1, 'red')var bezier2 = новый BezierMaker(canvas, arr2, 'blue')var bezier3 = новый BezierMaker(canvas, arr3, 'yellow')var bezier4 = новый BezierMaker(canvas, arr4, 'зеленый')bezier0.drawBezier()bezier1.drawBezier()bezier2.drawBezier()bezier3.drawBezier()bezier4.drawBezier()Постройте график результатов
При наличии менее трех контрольных точек будет использоваться собственный интерфейс API. Когда имеется более двух контрольных точек, реализуемая нами функция будет использоваться для рисования точек.
Основные принципыНарисовать кривую Безье
Суть построения кривой Безье заключается в применении формулы Безье:
P0-Pn в этой формуле представляет собой различные силовые операции каждой точки и пропорцию t от начальной точки до каждой контрольной точки, а затем до конечной точки.
BezierMaker.prototype.bezier = function(t) { //Вызов формулы Безье var x = 0, y = 0, bezierCtrlNodesArr = this.bezierCtrlNodesArr, //Массив контрольных точек n = bezierCtrlNodesArr.length - 1, self = this bezierCtrlNodesArr .forEach (функция(элемент, индекс) { if(!index) { x += item.x * Math.pow(( 1 - t ), n - индекс) * Math.pow(t, index) y += item.y * Math.pow(( 1 - t ), n - индекс) * Math.pow(t, index) } else { //factorial — это функция факториала x += self.factorial(n) / self.factorial(index) / self.factorial(n — index) * item.x * Math . тьфу(( 1 - t ), n - индекс) * Math.pow(t, index) y += self.factorial(n) / self.factorial(index) / self.factorial(n - index) * item.y * Math. pow(( 1 - t ), n - индекс) * Math.pow(t, index) } }) return { x: x, y: y }}Пересечь все точки и вычислить координаты текущей точки x, y на кривой Безье на основе значения текущей пропорции t (0<=t<=1). Автор делит значение t на 1000 частей, то есть t+=0,01 для каждой операции. Вычисленные в этот момент x и y представляют собой точки после разделения кривой Безье на 1000 частей. Когда значение t перемещается от 0 до 1 1000 раз, генерируется 1000 соответствующих координат x и y, и кривая Безье высокого порядка может быть смоделирована путем последовательного рисования точек и линий.
Автор подробно объяснит вывод формулы Безье в следующей статье. Теперь вам нужно только знать, что мы используем формулу Безье для расчета того, что фактическая кривая Безье разделена на 1000 точек, и затем соединяем точки прямыми линиями. кривую класса можно смоделировать.
Реализация анимации, созданной кривой Безье, в области моделирования.
Соответствующий код для этой части можно найти здесь.
Общая идея состоит в том, чтобы использовать рекурсивный метод для обработки каждого слоя контрольных точек как функции Бесселя первого порядка для расчета следующего слоя контрольных точек и их соответствующего соединения. Автор оставит конкретную логику до подробного объяснения принципов формулы кривой Безье, чтобы разобраться в принципах генерации анимации тестового сайта~
краткое содержаниеАвтор всегда хотел что-то открыть в открытом доступе (но ему не о чем писать). Однако все, что обычно используется, написано другими, а изобретение велосипеда не может быть хорошо написано другими. На этот раз я нашел, казалось бы, пустую область. Поэтому я принял очень торжественное решение открыть исходный код. Большинство продвинутых приложений Bezier в gayhub являются реализациями для Android. В области внешнего интерфейса еще есть много мест, которые можно расширить. Обсуждения приветствуются ~ Много критики!
наконецАдрес проекта: здесь✨✨
Адрес сайта тестирования: Обязательно заходите и играйте✨✨✨
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.