cubic-bezier-editor

1.0.6 • Public • Published

Cubic Bezier

Cubic bezier curve editor based on cubic-bezier.com modified to be easily customizable for embeding into other webapps.

DEMO

Quickstart

HTML

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

JS

const bezierEditor = cubicBezier({
    /* Your options */
});
bezierEditor.init();

CSS

* {
	margin: 0;
}

body {
	background: rgb(46, 42, 42);
	font-family: 'Helvetica Neue', sans-serif;
	line-height: 1.4;
}

Options

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

Reference

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

transformPos Callback

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 };
    },
});

Download

  • CDN
    • https://unpkg.com/cubic-bezier-editor
  • NPM
    • npm i cubic-bezier-editor
  • GIT
    • git clone https://github.com/Ju99ernaut/cubic-bezier.git

Usage

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();

Development

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

License

MIT

Package Sidebar

Install

npm i cubic-bezier-editor

Weekly Downloads

49

Version

1.0.6

License

MIT

Unpacked Size

101 kB

Total Files

14

Last publish

Collaborators

  • ju99ernaut