Cubic bezier curve editor based on cubic-bezier.com modified to be easily customizable for embeding into other webapps.
Example implemenation in an app.
<head>
<meta charset="utf-8" />
<title>cubic-bezier</title>
<link href="https://unpkg.com/cubic-bezier-editor/dist/cubic-bezier-editor.min.css" rel="stylesheet">
<script src="https://unpkg.com/cubic-bezier-editor"></script>
</head>
<body></body>
const bezierEditor = cubicBezier({
/* Your options */
});
bezierEditor.init();
* {
margin: 0;
}
body {
background: rgb(46, 42, 42);
font-family: 'Helvetica Neue', sans-serif;
line-height: 1.4;
}
Option | Description | Type | Default |
---|---|---|---|
appendTo |
Element or selector to append the editor | HTMLElement or string |
<body></body> |
onUpdate |
Callback to run when canvas is updated | Function |
() => {} |
width |
width of the canvas, height = width * 2 |
number |
150 |
default |
editor default values | string |
.25, .1, .25, 1 |
bezierThickness |
bezier curve thickness | number |
.015 |
handleThickness |
handle thickness | number |
.01 |
bezierColor |
bezier curve color | string |
#aaa4aa |
handleColor |
handle color | string |
rgba(0,255,0,.6) |
arrowKeys |
allow moving handle with arrow keys | boolean |
true |
onClick |
when canvas is clicked move the closest handle to mouse position | boolean |
true |
predefined |
predefined curves | object |
{'ease': '.25,.1,.25,1','linear': '0,0,1,1','ease-in': '.42,0,1,1','ease-out': '0,0,.58,1','ease-in-out': '.42,0,.58,1'} |
padding |
canvas padding | array or number |
[.25, 0] |
bezierLibrary |
bezier library options width and height apply to each library item |
object |
{width:30,height:30,handleColor:'rgba(0,255,0,.6)',bezierColor:'#aaa4aa',handleThickness:.01,bezierThickness:.015} |
input |
show input | boolean |
true |
preview |
show preview animation | boolean |
true |
duration |
preview animation duration | number |
1.5 |
transformPos |
custom callback function for modifying position onupdate | Function |
undefined |
cubicBezier.getValueArrayNum();//[0.25, 0.1, 0.25, 1]
cubicBezier.getValueArray();//[".25", " .1", " .25", " 1"]
cubicBezier.getValueString();//'.42,0,.58,1'
cubicBezier.getValueCss();//'cubic-bezier(.42,0,.58,1)'
cubicBezier.getDuration();//1.5
cubicBezier.checkCoordinates([".25", " .1", " .25", " 1"]);//true
By default all position data is obtained by using getBoundingClientRect
, the transformPos
callback can be used if you want to tweek these positions;
const bezierEditor = cubicBezier({
transformPos(l, t) {
// transform
return { left, top };
},
});
- CDN
https://unpkg.com/cubic-bezier-editor
- NPM
npm i cubic-bezier-editor
- GIT
git clone https://github.com/Ju99ernaut/cubic-bezier.git
Browser
<link href="https://unpkg.com/cubic-bezier-editor/dist/cubic-bezier-editor.min.css" rel="stylesheet">
<script src="https://unpkg.com/cubic-bezier-editor"></script>
<script>
const bezierEditor = cubicBezier({
/* Your options */
});
bezierEditor.init();
</script>
Modern Javascript
import cubicBezier from 'cubic-bezier-editor';
import 'cubic-bezier-editor/dist/cubic-bezier-editor.min.css';
const bezierEditor = cubicBezier({
/* Your options */
});
bezierEditor.init();
Clone repository
$ git clone https://github.com/Ju99ernaut/cubic-bezier.git
$ cd cubic-bezier
Install dependencies
$ npm i
Start dev server
$ npm start
Build
$ npm run build
MIT