@cvsfun/curve NPM

Curve

Drawing smooth curve easily in a simple way, and what under the hood is also simple.

Install

$ yarn add @cvsfun/curve
# or
$ npm install --save @cvsfun/curve

Usage

import SmoothCurve from '@cvsfun/curve'
const ctx = document.querySelector('canvas').getContext("2d");
let curves = [
  [
    {x:83,y:41,curve:true},
    {x:43,y:66,curve:true},
    {x:83,y:90,curve:true},
    {x:45,y:113,curve:true}
  ],[
    {x:147,y:39,curve:true},
    {x:118,y:50,curve:true},
    {x:107,y:74,curve:true},
    {x:120,y:100,curve:true},
    {x:146,y:111,curve:true}
  ]
]
curves.map(points => {
  SmoothCurve.draw(ctx, points)
})

smooth-curve

closed-curve

Only need to use style setting syntax before calling draw function.

...
ctx.lineWidth = 5
ctx.strokeStyle = 'rgb(50, 50, 255)'
curves.map(points => {
  SmoothCurve.draw(ctx, points)
})

custom-style

curves.map(points => { SmoothCurve.draw(ctx, points) })


</p>
</details>

![false-point-curve](https://user-images.githubusercontent.com/7822364/63152485-8a29a080-c03e-11e9-81ef-bf153e30633b.png)

<details>
<summary><b>Use returned Path2D instance</b></summary>
<p>

`draw()` method would return a [`Path2D`](https://developer.mozilla.org/en-US/docs/Web/API/Path2D) instance so you can use it to do some other processing.
```js
...
let curvePath = SmoothCurve.draw(ctx, points)
OtherHandler(curvePath)

API

`draw(context, points, option?)`

context [CanvasRenderingContext2D](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D)
points <CurvePoint >
option [Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)
- closed? [boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type) If set to true, the curve will be closed. It means the start and the end point will be connected by extra control points. Defaults to false.
- tension? [number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type) This controls all the control points' position by adjusting the distance ratio between key points. The range is [0,1]. Defaults to 0.5.
returns: <Path2D | undefined>

`getCurveControlPoints(points, option?)`

points <CurvePoint > Same as points in draw() function
option [Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object) Same as option in draw() function
returns: <Point >

`getBezierLength(count, p0, p1, p2, p3?)`

count [number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type) The count Interpolation points
p0,p1,p2,p3 \<Point>
- p3 is a optional Point, If supply p3 point, it will be treated as cubic bezier curve, otherwise is quadratic bezier curve.
returns: [number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type)

Interface

Point

Point [Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)
- x [number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type) The x position of point
- y [number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type) The y position of point

CurvePoint

CurvePoint [Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object) extends Point
- curve [boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type) If set to true, the tension of control points around this point will be 0.5. Otherwise the tension will be 0.

Under the hood

Only use canvas inner APIs to draw quadratic and cubic bezier curves.
Use some simple steps to draw smooth curve through all key points.
控制点计算方法中文资料

This simple method is inspired by AGG. The author wrote:

"This method is pure heuristic and empiric. It probably gives a wrong result from the point of view of strict mathematical modeling. But in practice the result is good enough and it requires absolute minimum of calculations. "