Bezierizer src/bezierizer.core.js

Bezierizer

function
Bezierizer()
  • @param: {Element}containerThe container element to insert the Bezierizer widget into.
  • @constructor:

Description

Creates a Bezierizer widget and inserts it into the DOM.

Source

function Bezierizer (container) {
  this.$el = $(container);
  this.$el.append($(HTML_TEMPLATE));

  this._$canvasContainer = this.$el.find('.bezierizer-canvas-container');
  this._$canvas = this._$canvasContainer.find('canvas');
  this._$handleContainer = this.$el.find('.bezierizer-handle-container');
  this._$handles = this._$handleContainer.find('.bezierizer-handle');

  this._ctx = this._$canvas[0].getContext('2d');
  this._$canvas[0].height = this._$canvas.height();
  this._$canvas[0].width = this._$canvas.width();

  this._$handles.dragon({
    within: this._$handleContainer
  });

  this._points = {};
  this.setHandlePositions({
     x1: 0.25
    ,y1: 0.5
    ,x2: 0.75
    ,y2: 0.5
  });

  this._initBindings();
}

getHandlePositions

method
Bezierizer.prototype.getHandlePositions()
  • @return: {Object}

Description

Gets an object that contains normalized (between 0 and 1) x1, y1, x2 and y2 numbers.

Source

Bezierizer.prototype.getHandlePositions = function () {
  return $.extend({}, this._points);
};

setHandlePositions

method
Bezierizer.prototype.setHandlePositions()
  • @param: {Object}pointsAn object that may contain numbers representing any or all of x1, y1, x2, and y2.

Description

Sets the handle positions. points does not require all of the points, just the ones you want to set. points properties should represent the normalized values that the Bezier curve should have.

Source

Bezierizer.prototype.setHandlePositions = function (points) {
  $.extend(this._points, points);
  var handleContainerOuterHeight = this._$handleContainer.outerHeight(true);
  var handleContainerOuterWidth = this._$handleContainer.outerWidth(true);
  var handleOuterWidth = this._$handles.outerWidth(true);
  var handleOuterHeight = this._$handles.outerHeight(true);

  this._$handles.eq(0).css({
    left: Math.floor(
        this._points.x1 * (handleContainerOuterWidth - handleOuterWidth))
    ,top: Math.floor(
        this._points.y1 * (handleContainerOuterHeight - handleOuterHeight))
  });
  this._$handles.eq(1).css({
    left: Math.floor(
        this._points.x2 * (handleContainerOuterWidth - handleOuterWidth))
    ,top: Math.floor(
        this._points.y2 * (handleContainerOuterHeight - handleOuterHeight))
  });

  this._redraw();
};

return Bezierizer;