Canvas implements high-order Bezier curve (N-order Bezier curve generator)

Since the native Canvas only supports up to third-order Bezier curves, what should I do if I want to add multiple control points? (Even most complex curves can be simulated with third-order Bezier.) At the same time, it is difficult for us to clearly understand the position of the Bezier control points very intuitively. How much can we set the control points to form the curve we want? . In order to solve the above two pain points, there seems to be no N-level solution (js version) in the community, so this time the author is very serious about open source bezierMaker.js!

bezierMaker.js theoretically supports the generation of N-order Bezier curves, and also provides a testing ground for developers to add and drag control points to ultimately generate a set of drawing animations. It is very intuitive for developers to know the different generation curves corresponding to control points at different positions.

If you like this work, welcome to star. After all, stars are hard-earned. .

Project address: here✨✨✨

When drawing complex high-order Bezier curves, you cannot know the precise location of the control points of the curve you need. When simulating in the test field, the coordinate values ​​of the control points can be obtained in real time. The obtained point coordinates can be converted into an object array and passed into the BezierMaker class to generate the target curve.

renderings

1. [x] Any number of control points can be added to the test site
2. [x] The test site supports the formation animation of curve drawing.
3. [x] Control points can be freely dragged
4. [x] Supports displaying tangent lines during the formation of Bezier curves
5. [x] The drawing of Bezier curves of order 3 and below uses native API

 <script src=./bezierMaker.js></script>

The above rendering shows the use of the test site. After you obtain the accurate coordinates of the control points through the test site, you can call bezierMaker.js to draw the curve directly.

 /** * DOM object of canvas canvas * bezierCtrlNodesArr control point array, including x, y coordinates * color curve color */var canvas = document.getElementById('canvas')//Use native method to implement before level 3 var arr0 = [ {x:70,y:25},{x:24,y:51}]var 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} ]var arr4 = [{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 = new BezierMaker(canvas, arr0, 'black')var bezier1 = new BezierMaker(canvas, arr1, 'red')var bezier2 = new BezierMaker(canvas, arr2, 'blue')var bezier3 = new BezierMaker(canvas, arr3, 'yellow')var bezier4 = new BezierMaker(canvas, arr4, 'green')bezier0.drawBezier()bezier1.drawBezier()bezier2.drawBezier()bezier3.drawBezier()bezier4.drawBezier()

Plot the results

When there are less than 3 control points, the native API interface will be used. When there are more than 2 control points, the function we implement will be used to draw the points.

Draw Bezier Curve

The core point of drawing Bezier curve lies in the application of Bezier formula:

P0-Pn in this formula represents various power operations of each point and the proportion t from the starting point to each control point and then to the end point.

 BezierMaker.prototype.bezier = function(t) { //Bezier formula calls var x = 0, y = 0, bezierCtrlNodesArr = this.bezierCtrlNodesArr, //Control point array n = bezierCtrlNodesArr.length - 1, self = this bezierCtrlNodesArr .forEach(function(item, index) { if(!index) { x += item.x * Math.pow(( 1 - t ), n - index) * Math.pow(t, index) y += item.y * Math.pow(( 1 - t ), n - index) * Math.pow(t, index) } else { //factorial is the factorial function x += self.factorial(n) / self.factorial(index) / self.factorial(n - index) * item.x * Math. pow(( 1 - t ), n - index) * Math.pow(t, index) y += self.factorial(n) / self.factorial(index) / self.factorial(n - index) * item.y * Math. pow(( 1 - t ), n - index) * Math.pow(t, index) } }) return { x: x, y: y }}

Traverse all points and calculate the current point coordinates x, y on the Bezier curve based on the value of the current proportion t (0<=t<=1). The author divides the value of t into 1000 parts, that is, t+=0.01 for each operation. The x and y calculated at this time are the points after the Bezier curve is divided into 1000 parts. When the t value traverses from 0 to 1 1000 times, 1000 x and y corresponding coordinates are generated, and a high-order Bezier curve can be simulated by drawing points and lines in sequence.

The author will specifically explain the derivation of the Bezier formula in a later article. Now you only need to know that we use the Bezier formula to calculate that the actual Bezier curve is divided into 1000 points, and connect the points with straight lines. Then the class curve can be simulated.

Implementation of animation generated by Bezier curve in simulation field

The relevant code for this part can be found here

The overall idea is to use a recursive method to treat each layer of control points as a first-order Bessel function to calculate the next layer of control points and connect them accordingly. The author will leave the specific logic until the in-depth explanation of the principles of the Bezier curve formula to sort out the animation generation principles of the test site~

The author has always wanted to open source something (but there is nothing he can write about). However, everything that is usually used has been written by others, and reinventing the wheel cannot be written well by others. This time, I found a seemingly blank area. So I made a very solemn decision to open source it. Most of the advanced applications of Bezier in gayhub are Android implementations. There are still many places in the front-end field that can be expanded upon. Discussions are welcome~ Lots of criticism!

Project address: here✨✨

Testing site address: Be sure to come in and play✨✨✨

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.