Smooth-curve NPM

Smooth Curve

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

Install

$ yarn add smooth-curve
# or
$ npm install --save smooth-curve

<script src="https://unpkg.com/smooth-curve/smooth-curve.min.js"></script>

Usage

import SmoothCurve from 'smooth-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[]>
- CurvePoint [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
  - 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.
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[]>
- Points [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)
  - y [number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type)

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. "