global define: true
// PRIVATE HELPER FUNCTIONS
//
global define: true
// PRIVATE HELPER FUNCTIONS
//
Creates a Bezierizer widget and inserts it into the DOM.
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();
}
Gets an object that contains normalized (between 0 and 1) x1, y1, x2 and y2 numbers.
Bezierizer.prototype.getHandlePositions = function () {
return $.extend({}, this._points);
};
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.
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;