tamilvasan/bezierizer

A graphical widget for defining a Bezier curve

Bezierizer

API documentation

Sorry about the terrible name. I pronounce it as "bez-ee-aye-i-zer."

This is a graphical widget intended to be used by Stylie. It's built pretty specifically for Stylie, but if the community requests it (via the issue tracker), I am happy to make changes to Bezierizer to be more flexible.

Bezierizer is inspired greatly by Lea Verou's cubic-bezier and Matthew Lein's Ceaser.

To use Bezierizer, just call the constructor and give it a container element to inject itself into:

var bezierizerEl = document.getElementById('bezierizer');
var bezierizer = new Bezierizer(bezierizerEl);

bezierizer.$el.on('change', function () {
  console.log(bezierizer.getHandlePositions());
});

Dragging either handle of the widget triggers the change event on the Bezierizer instance's $el (which is the widget that is injected into the container element).

Bezierizer must be loaded as an AMD module.