drawing-canvas.js revision 91d40744967aabc3e1c105820a22e279fdecc689
8346e283ad797ef549be70335d3961f4324901baRyan Grove * Set of drawing apis for canvas based classes.
8346e283ad797ef549be70335d3961f4324901baRyan Grove * @class CanvasDrawingUtil
8346e283ad797ef549be70335d3961f4324901baRyan Grove * @constructor
8ff167b366d7ee96cfc801bb01cd93e3ce573cbfMatt Sweeney * Initializes the class.
8346e283ad797ef549be70335d3961f4324901baRyan Grove * @method initializer
8ff167b366d7ee96cfc801bb01cd93e3ce573cbfMatt Sweeney * Specifies a bitmap fill used by subsequent calls to other drawing methods.
8ff167b366d7ee96cfc801bb01cd93e3ce573cbfMatt Sweeney * @method beginBitmapFill
8ff167b366d7ee96cfc801bb01cd93e3ce573cbfMatt Sweeney * @param {Object} config
6eae5adc42f886ebacac1f714be3f0c9e4b205c1Luke Smith this._fillX = !isNaN(config.tx) ? config.tx : NaN;
6eae5adc42f886ebacac1f714be3f0c9e4b205c1Luke Smith this._fillY = !isNaN(config.ty) ? config.ty : NaN;
8ff167b366d7ee96cfc801bb01cd93e3ce573cbfMatt Sweeney this._bitmapFill = context.createPattern(bitmap, repeat);
8ff167b366d7ee96cfc801bb01cd93e3ce573cbfMatt Sweeney return this;
8ff167b366d7ee96cfc801bb01cd93e3ce573cbfMatt Sweeney * Specifes a solid fill used by subsequent calls to other drawing methods.
8ff167b366d7ee96cfc801bb01cd93e3ce573cbfMatt Sweeney * @method beginFill
8ff167b366d7ee96cfc801bb01cd93e3ce573cbfMatt Sweeney * @param {String} color Hex color value for the fill.
8ff167b366d7ee96cfc801bb01cd93e3ce573cbfMatt Sweeney * @param {Number} alpha Value between 0 and 1 used to specify the opacity of the fill.
8ff167b366d7ee96cfc801bb01cd93e3ce573cbfMatt Sweeney return this;
8ff167b366d7ee96cfc801bb01cd93e3ce573cbfMatt Sweeney * Specifies a gradient fill used by subsequent calls to other drawing methods.
8ff167b366d7ee96cfc801bb01cd93e3ce573cbfMatt Sweeney * @method beginGradientFill
8ff167b366d7ee96cfc801bb01cd93e3ce573cbfMatt Sweeney * @param {Object} config
8ff167b366d7ee96cfc801bb01cd93e3ce573cbfMatt Sweeney this._fillX = !isNaN(config.tx) ? config.tx : NaN;
8ff167b366d7ee96cfc801bb01cd93e3ce573cbfMatt Sweeney this._fillY = !isNaN(config.ty) ? config.ty : NaN;
8ff167b366d7ee96cfc801bb01cd93e3ce573cbfMatt Sweeney for(;i < len; ++i)
8ff167b366d7ee96cfc801bb01cd93e3ce573cbfMatt Sweeney return this;
8ff167b366d7ee96cfc801bb01cd93e3ce573cbfMatt Sweeney * Specifies a line style used for subsequent calls to drawing methods.
8ff167b366d7ee96cfc801bb01cd93e3ce573cbfMatt Sweeney * @method lineStyle
8ff167b366d7ee96cfc801bb01cd93e3ce573cbfMatt Sweeney * @param {Number} thickness indicates the thickness of the line
8ff167b366d7ee96cfc801bb01cd93e3ce573cbfMatt Sweeney * @param {String} color hex color value for the line
8ff167b366d7ee96cfc801bb01cd93e3ce573cbfMatt Sweeney * @param {Number} alpha Value between 0 and 1 used to specify the opacity of the fill.
8346e283ad797ef549be70335d3961f4324901baRyan Grove lineStyle: function(thickness, color, alpha, pixelHinting, scaleMode, caps, joints, miterLimit) {
8ff167b366d7ee96cfc801bb01cd93e3ce573cbfMatt Sweeney this._strokeStyle = this._2RGBA(this._strokeStyle, alpha);
8ff167b366d7ee96cfc801bb01cd93e3ce573cbfMatt Sweeney if (context.lineCap) { // FF errors when trying to set
8ff167b366d7ee96cfc801bb01cd93e3ce573cbfMatt Sweeney //context.lineCap = caps;
8ff167b366d7ee96cfc801bb01cd93e3ce573cbfMatt Sweeney return this;
8ff167b366d7ee96cfc801bb01cd93e3ce573cbfMatt Sweeney * Draws a line segment using the current line style from the current drawing position to the specified x and y coordinates.
8ff167b366d7ee96cfc801bb01cd93e3ce573cbfMatt Sweeney * @method lineTo
8ff167b366d7ee96cfc801bb01cd93e3ce573cbfMatt Sweeney * @param {Number} point1 x-coordinate for the end point.
8ff167b366d7ee96cfc801bb01cd93e3ce573cbfMatt Sweeney * @param {Number} point2 y-coordinate for the end point.
41483addf2a47df89e3a3056f22a16bf4cf87abeMatt Sweeney if (typeof point1 === 'string' || typeof point1 === 'number') {
41483addf2a47df89e3a3056f22a16bf4cf87abeMatt Sweeney return this;
8ff167b366d7ee96cfc801bb01cd93e3ce573cbfMatt Sweeney * Moves the current drawing position to specified x and y coordinates.
8ff167b366d7ee96cfc801bb01cd93e3ce573cbfMatt Sweeney * @method moveTo
8ff167b366d7ee96cfc801bb01cd93e3ce573cbfMatt Sweeney * @param {Number} x x-coordinate for the end point.
8ff167b366d7ee96cfc801bb01cd93e3ce573cbfMatt Sweeney * @param {Number} y y-coordinate for the end point.
8ff167b366d7ee96cfc801bb01cd93e3ce573cbfMatt Sweeney moveTo: function(x, y) {
8ff167b366d7ee96cfc801bb01cd93e3ce573cbfMatt Sweeney return this;
8ff167b366d7ee96cfc801bb01cd93e3ce573cbfMatt Sweeney * Clears the graphics object.
8ff167b366d7ee96cfc801bb01cd93e3ce573cbfMatt Sweeney * @method clear
8ff167b366d7ee96cfc801bb01cd93e3ce573cbfMatt Sweeney clear: function() {
8ff167b366d7ee96cfc801bb01cd93e3ce573cbfMatt Sweeney return this;
8ff167b366d7ee96cfc801bb01cd93e3ce573cbfMatt Sweeney * Draws a bezier curve.
8ff167b366d7ee96cfc801bb01cd93e3ce573cbfMatt Sweeney * @method curveTo
8ff167b366d7ee96cfc801bb01cd93e3ce573cbfMatt Sweeney * @param {Number} cp1x x-coordinate for the first control point.
8ff167b366d7ee96cfc801bb01cd93e3ce573cbfMatt Sweeney * @param {Number} cp1y y-coordinate for the first control point.
8ff167b366d7ee96cfc801bb01cd93e3ce573cbfMatt Sweeney * @param {Number} cp2x x-coordinate for the second control point.
8ff167b366d7ee96cfc801bb01cd93e3ce573cbfMatt Sweeney * @param {Number} cp2y y-coordinate for the second control point.
bc434ac650a27231efd02bc22efb6aa323286ab8Matt Sweeney * @param {Number} x x-coordinate for the end point.
36ca1e4313c10e481525962934a360b773992432Matt Sweeney * @param {Number} y y-coordinate for the end point.
db006be6df49e087e3df27f259256be08df7a1efMatt Sweeney curveTo: function(cp1x, cp1y, cp2x, cp2y, x, y) {
8ff167b366d7ee96cfc801bb01cd93e3ce573cbfMatt Sweeney this._context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
db006be6df49e087e3df27f259256be08df7a1efMatt Sweeney return this;
db006be6df49e087e3df27f259256be08df7a1efMatt Sweeney * Draws a quadratic bezier curve.
bc434ac650a27231efd02bc22efb6aa323286ab8Matt Sweeney * @method quadraticCurveTo
36ca1e4313c10e481525962934a360b773992432Matt Sweeney * @param {Number} cpx x-coordinate for the control point.
db006be6df49e087e3df27f259256be08df7a1efMatt Sweeney * @param {Number} cpy y-coordinate for the control point.
db006be6df49e087e3df27f259256be08df7a1efMatt Sweeney * @param {Number} x x-coordinate for the end point.
db006be6df49e087e3df27f259256be08df7a1efMatt Sweeney * @param {Number} y y-coordinate for the end point.
db006be6df49e087e3df27f259256be08df7a1efMatt Sweeney quadraticCurveTo: function(controlX, controlY, anchorX, anchorY) {
db006be6df49e087e3df27f259256be08df7a1efMatt Sweeney this._context.quadraticCurveTo(controlX, controlY, anchorX, anchorY);
this._shape = {
x:x - radius,
y:y - radius,
this._drawingComplete = false;
this._trackPos(x, y);
this._draw();
drawEllipse: function(x, y, w, h) {
this._shape = {
this._drawingComplete = false;
this._trackPos(x, y);
this._trackSize(x + w, y + h);
this._draw();
drawRect: function(x, y, w, h) {
this._shape = {
this._drawingComplete = false;
this._trackPos(x, y);
this._trackSize(w, h);
this._draw();
this._shape = {
this._drawingComplete = false;
this._trackPos(x, y);
this._trackSize(w, h);
this._draw();
var x = cfg.x,
y = cfg.y,
segs,
ax,
ay,
bx,
by,
cx,
cy,
this._drawingComplete = false;
this.moveTo(x, y);
for(; i < segs; ++i)
this.lineTo(x, y);
this._trackPos(x, y);
this._draw();
end: function() {
this._draw();
this._initProps();
lineGradientStyle: function() {
setSize: function(w, h)
_initProps: function() {
this._fillType = null;
this._stroke = null;
this._bitmapFill = null;
this._drawingComplete = false;
_getFill: function() {
fill;
switch (type) {
return fill;
def,
grad,
y1 = y;
y2 = y + h;
y1 = y + h;
y2 = y;
x1 = x + w;
x2 = x;
x1 = x;
x2 = x + w;
return grad;
def,
grad,
return grad;
_draw: function()
fill;
if (this._fillType) {
if (fill) {
if (this._fillType) {
if (this._stroke) {
this._drawingComplete = true;
_drawingComplete: false,
return val;
_createDummy: function() {
return dummy;
return graphic;
_trackSize: function(w, h) {
if (w > this._width) {
this._width = w;
if (h > this._height) {
this._height = h;
_trackPos: function(x, y) {
if (x > this._x) {
this._x = x;
if (y > this._y) {
this._y = y;
_updateShapeProps: function(x, y)
if(!this._shape)
this._shape = {};
if(!this._shape.x)
this._shape.x = x;
if(!this._shape.y)
this._shape.y = y;
if(!this._shape.w)
this._shape.w = w;
if(!this._shape.h)
this._shape.h = h;