CanvasDrawing.js revision 828c58761d90445b8b9d20a82d85dc1479317f71
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * Creates dom element used for converting color string to rgb
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @method _createDummy
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * Set of drawing apis for canvas based classes.
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @class CanvasDrawing
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @constructor
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * Regex expression used for converting hex strings to rgb
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @property _reHex
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp _reHex: /^#?([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})$/i,
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * Parses hex color string and alpha value to rgba
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @method _2RGBA
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * Converts color to rgb format
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @method _2RGB
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * Sets the size of the graphics object.
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @method setSize
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @param w {Number} width to set for the instance.
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @param h {Number} height to set for the instance.
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp setSize: function(w, h) {
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp _updatePosition: function(x, y)
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp if(x <= this._left)
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp else if(x >= this._right)
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp if(y <= this._top)
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp else if(y >= this._bottom)
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp _updateCoords: function(x, y)
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * Holds queue of methods for the target canvas.
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @property _methods
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @type Object
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * Holds queue of properties for the target canvas.
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @property _properties
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @type Object
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * Adds a method to the drawing queue
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * Draws a line segment using the current line style from the current drawing position to the specified x and y coordinates.
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @method lineTo
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @param {Number} point1 x-coordinate for the end point.
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @param {Number} point2 y-coordinate for the end point.
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp if (typeof point1 === 'string' || typeof point1 === 'number') {
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp this._updateDrawingQueue(["lineTo", args[i][0], args[i][1]]);
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp this._lineToMethods[this._lineToMethods.length] = this._methods[this._methods.length - 1];
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp return this;
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * Moves the current drawing position to specified x and y coordinates.
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @method moveTo
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @param {Number} x x-coordinate for the end point.
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @param {Number} y y-coordinate for the end point.
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp moveTo: function(x, y) {
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp return this;
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * Draws a bezier curve.
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @method curveTo
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @param {Number} cp1x x-coordinate for the first control point.
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @param {Number} cp1y y-coordinate for the first control point.
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @param {Number} cp2x x-coordinate for the second control point.
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @param {Number} cp2y y-coordinate for the second control point.
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @param {Number} x x-coordinate for the end point.
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @param {Number} y y-coordinate for the end point.
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp this._updateDrawingQueue(["bezierCurveTo", cp1x, cp1y, cp2x, cp2y, x, y]);
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp return this;
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * Draws a quadratic bezier curve.
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @method quadraticCurveTo
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @param {Number} cpx x-coordinate for the control point.
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @param {Number} cpy y-coordinate for the control point.
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @param {Number} x x-coordinate for the end point.
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @param {Number} y y-coordinate for the end point.
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp this._updateDrawingQueue(["quadraticCurveTo", cpx, cpy, x, y]);
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp return this;
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * Draws a circle.
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @method drawCircle
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @param {Number} x y-coordinate
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @param {Number} y x-coordinate
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @param {Number} r radius
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp this._updateDrawingQueue(["arc", x + radius, y + radius, radius, startAngle, endAngle, false]);
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp return this;
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * Draws an ellipse.
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @method drawEllipse
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @param {Number} x x-coordinate
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @param {Number} y y-coordinate
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @param {Number} w width
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @param {Number} h height
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp drawEllipse: function(x, y, w, h) {
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp for(; i < l; i++)
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp cx = centerX + Math.cos(angleMid) * (radius / Math.cos(theta / 2));
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp cy = centerY + Math.sin(angleMid) * (yRadius / Math.cos(theta / 2));
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp this._trackSize(x + w, y + h);
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp return this;
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * Draws a rectangle.
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @method drawRect
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @param {Number} x x-coordinate
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @param {Number} y y-coordinate
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @param {Number} w width
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @param {Number} h height
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp drawRect: function(x, y, w, h) {
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp this.moveTo(x, y);
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp this.lineTo(x + w, y);
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp this.lineTo(x + w, y + h);
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp this.lineTo(x, y + h);
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp this.lineTo(x, y);
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp return this;
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * Draws a rectangle with rounded corners.
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @method drawRect
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @param {Number} x x-coordinate
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @param {Number} y y-coordinate
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @param {Number} w width
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @param {Number} h height
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @param {Number} ew width of the ellipse used to draw the rounded corners
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @param {Number} eh height of the ellipse used to draw the rounded corners
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp this._updateDrawingQueue(["quadraticCurveTo", x, y + h, x + ew, y + h]);
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp this._updateDrawingQueue(["lineTo", x + w - ew, y + h]);
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp this._updateDrawingQueue(["quadraticCurveTo", x + w, y + h, x + w, y + h - eh]);
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp this._updateDrawingQueue(["quadraticCurveTo", x + w, y, x + w - ew, y]);
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp this._updateDrawingQueue(["quadraticCurveTo", x, y, x, y + eh]);
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp return this;
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * Draws a wedge.
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @param x x component of the wedge's center point
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @param y y component of the wedge's center point
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @param startAngle starting angle in degrees
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @param arc sweep of the wedge. Negative values draw clockwise.
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @param radius radius of wedge. If [optional] yRadius is defined, then radius is the x radius.
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @param yRadius [optional] y radius for wedge.
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp var x = cfg.x,
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp // move to x,y position
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp // limit sweep to reasonable numbers
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp // First we calculate how many segments are needed
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp // for a smooth arc.
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp // Now calculate the sweep of each segment.
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp // The math requires radians rather than degrees. To convert from degrees
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp // use the formula (degrees/180)*Math.PI to get radians.
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp // convert angle startAngle to radians
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp // draw the curve in segments no larger than 45 degrees.
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp // draw a line from the center to the start of the curve
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp ax = x + Math.cos(startAngle / 180 * Math.PI) * radius;
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp ay = y + Math.sin(-startAngle / 180 * Math.PI) * yRadius;
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp // Loop for drawing curve segments
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp for(; i < segs; ++i)
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp cx = x + Math.cos(angleMid) * (radius / Math.cos(theta / 2));
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp cy = y + Math.sin(angleMid) * (yRadius / Math.cos(theta / 2));
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp this._updateRenderQueue(["quadraticCurveTo", cx, cy, bx, by]);
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp // close the wedge by drawing a line to the center
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * Completes a drawing operation.
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @method end
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp end: function() {
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp return this;
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * Returns a linear gradient fill
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @method _getLinearGradient
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp tanRadians = parseFloat(parseFloat(Math.tan(r * radCon)).toFixed(8));
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp if(r < 180)
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp gradient = this._context.createLinearGradient(x1, y1, x2, y2);
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp for(; i < len; ++i)
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * Returns a radial gradient fill
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @method _getRadialGradient
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp d = Math.sqrt( Math.pow(Math.abs(xc - x1), 2) + Math.pow(Math.abs(yc - y1), 2) );
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp //hack. gradient won't show if it is exactly on the edge of the arc
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp //If the gradient radius is greater than the circle's, adjusting the radius stretches the gradient properly.
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp //If the gradient radius is less than the circle's, adjusting the radius of the gradient will not work.
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp //Instead, adjust the color stops to reflect the smaller radius.
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp if(r >= 0.5)
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp gradient = this._context.createRadialGradient(x1, y1, r, x2, y2, r * w);
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp gradient = this._context.createRadialGradient(x1, y1, r, x2, y2, w/2);
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp for(; i < len; ++i)
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * Clears all values
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @method _initProps
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp _initProps: function() {
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * Creates canvas element
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @method _createGraphic
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * Updates the size of the graphics object
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @method _trackSize
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @param {Number} w width
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @param {Number} h height
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp _trackSize: function(w, h) {
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp if (w > this._width) {
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp if (h > this._height) {
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * Updates the position of the current drawing
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @method _trackPos
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @param {Number} x x-coordinate
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @param {Number} y y-coordinate
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp _trackPos: function(x, y) {
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp if (x > this._x) {
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp if (y > this._y) {
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * Updates the position and size of the current drawing
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @method _updateShapeProps
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @param {Number} x x-coordinate
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @param {Number} y y-coordinate
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp _updateShapeProps: function(x, y)
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp if(!this._shape.x)
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp this._shape.x = x;
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp if(!this._shape.y)
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp this._shape.y = y;
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp if(!this._shape.w)
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp this._shape.w = w;
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp if(!this._shape.h)
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp this._shape.h = h;