Tj Holowaychuk
14 years ago
3 changed files with 476 additions and 442 deletions
@ -0,0 +1,447 @@ |
|||
|
|||
/*! |
|||
* Canvas - Context2d |
|||
* Copyright (c) 2010 LearnBoost <tj@learnboost.com> |
|||
* MIT Licensed |
|||
*/ |
|||
|
|||
/** |
|||
* Module dependencies. |
|||
*/ |
|||
|
|||
var canvas = require('../build/default/canvas') |
|||
, Context2d = canvas.CanvasRenderingContext2d |
|||
, CanvasGradient = canvas.CanvasGradient |
|||
, colors = require('./colors'); |
|||
|
|||
/** |
|||
* Export `Context2d` as the module. |
|||
*/ |
|||
|
|||
var Context2d = exports = module.exports = Context2d; |
|||
|
|||
/** |
|||
* Cache color string RGBA values. |
|||
*/ |
|||
|
|||
var cache = {}; |
|||
|
|||
/** |
|||
* Text baselines. |
|||
*/ |
|||
|
|||
var baselines = ['alphabetic', 'top', 'bottom', 'middle', 'ideographic', 'hanging']; |
|||
|
|||
/** |
|||
* Font RegExp helpers. |
|||
*/ |
|||
|
|||
var weights = 'normal|bold|bolder|lighter|[1-9](?:00)' |
|||
, styles = 'normal|italic|oblique' |
|||
, units = 'px|pt|pc|in|cm|mm|%' |
|||
, string = '"([^"]+)"|[\\w-]+'; |
|||
|
|||
/** |
|||
* Font parser RegExp; |
|||
*/ |
|||
|
|||
var fontre = new RegExp('^ *' |
|||
+ '(?:(' + weights + ') *)?' |
|||
+ '(?:(' + styles + ') *)?' |
|||
+ '(\\d+)(' + units + ') *' |
|||
+ '((?:' + string + ')( *, *(?:' + string + '))*)' |
|||
); |
|||
|
|||
/** |
|||
* Return a function used to normalize an RGBA color `prop`. |
|||
* |
|||
* @param {String} prop |
|||
* @return {Function} |
|||
* @api private |
|||
*/ |
|||
|
|||
function normalizedColor(prop) { |
|||
return function(){ |
|||
var rgba = this[prop]; |
|||
if (1 == rgba[3]) { |
|||
return '#' |
|||
+ rgba[0].toString(16) |
|||
+ rgba[1].toString(16) |
|||
+ rgba[2].toString(16); |
|||
} else { |
|||
return 'rgba(' |
|||
+ rgba[0] + ', ' |
|||
+ rgba[1] + ', ' |
|||
+ rgba[2] + ', ' |
|||
+ rgba[3] + ')'; |
|||
} |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* Parse font `str`. |
|||
* |
|||
* @param {String} str |
|||
* @return {Object} |
|||
* @api private |
|||
*/ |
|||
|
|||
var parseFont = exports.parseFont = function(str){ |
|||
var font = {} |
|||
, captures = fontre.exec(str); |
|||
|
|||
// Invalid
|
|||
if (!captures) return; |
|||
|
|||
// Populate font object
|
|||
font.weight = captures[1] || 'normal'; |
|||
font.style = captures[2] || 'normal'; |
|||
font.size = parseInt(captures[3], 10); |
|||
font.unit = captures[4]; |
|||
font.family = captures[5]; |
|||
|
|||
return font; |
|||
}; |
|||
|
|||
/** |
|||
* Parse the given color `str`. |
|||
* |
|||
* Current supports: |
|||
* |
|||
* - #nnn |
|||
* - #nnnnnn |
|||
* - rgb(r,g,b) |
|||
* - rgba(r,g,b,a) |
|||
* - color |
|||
* |
|||
* Examples |
|||
* |
|||
* - #fff |
|||
* - #FFF |
|||
* - #FFFFFF |
|||
* - rgb(255,255,5) |
|||
* - rgba(255,255,5,.8) |
|||
* - rgba(255,255,5,0.8) |
|||
* - white |
|||
* - red |
|||
* |
|||
* @param {String} str |
|||
* @return {Array} |
|||
* @api private |
|||
*/ |
|||
|
|||
var parseColor = exports.parseColor = function(str){ |
|||
if (cache[str]) return cache[str]; |
|||
str = colors[str] || String(str); |
|||
// RGBA
|
|||
if (0 == str.indexOf('rgba')) { |
|||
var captures = /rgba\((\d{1,3}) *, *(\d{1,3}) *, *(\d{1,3}) *, *(\d+\.\d+|\.\d+|\d+) *\)/.exec(str); |
|||
if (!captures) return; |
|||
return cache[str] = [ |
|||
parseInt(captures[1], 10) |
|||
, parseInt(captures[2], 10) |
|||
, parseInt(captures[3], 10) |
|||
, parseFloat(captures[4], 10) |
|||
]; |
|||
// RGB
|
|||
} else if (0 == str.indexOf('rgb')) { |
|||
var captures = /rgb\((\d{1,3}) *, *(\d{1,3}) *, *(\d{1,3}) *\)/.exec(str); |
|||
if (!captures) return; |
|||
return cache[str] = [ |
|||
parseInt(captures[1], 10) |
|||
, parseInt(captures[2], 10) |
|||
, parseInt(captures[3], 10) |
|||
, 1 |
|||
]; |
|||
// #RRGGBB
|
|||
} else if ('#' == str[0] && str.length > 4) { |
|||
var captures = /#([a-fA-F\d]{2})([a-fA-F\d]{2})([a-fA-F\d]{2})/.exec(str); |
|||
if (!captures) return; |
|||
return cache[str] = [ |
|||
parseInt(captures[1], 16) |
|||
, parseInt(captures[2], 16) |
|||
, parseInt(captures[3], 16) |
|||
, 1 |
|||
]; |
|||
// #RGB
|
|||
} else if ('#' == str[0]) { |
|||
var captures = /#([a-fA-F\d])([a-fA-F\d])([a-fA-F\d])/.exec(str); |
|||
if (!captures) return; |
|||
return cache[str] = [ |
|||
parseInt(captures[1] + captures[1], 16) |
|||
, parseInt(captures[2] + captures[2], 16) |
|||
, parseInt(captures[3] + captures[3], 16) |
|||
, 1 |
|||
]; |
|||
} |
|||
}; |
|||
|
|||
/** |
|||
* Add `color` stop at the given `offset`. |
|||
* |
|||
* @param {Number} offset |
|||
* @param {String} color |
|||
* @api public |
|||
*/ |
|||
|
|||
CanvasGradient.prototype.addColorStop = function(offset, color){ |
|||
var rgba; |
|||
if (rgba = parseColor(color)) { |
|||
this.addColorStopRGBA( |
|||
offset |
|||
, rgba[0] |
|||
, rgba[1] |
|||
, rgba[2] |
|||
, rgba[3]); |
|||
} |
|||
}; |
|||
|
|||
/** |
|||
* Create a linear gradient at the given point `(x0, y0)` and `(x1, y1)`. |
|||
* |
|||
* @param {Number} x0 |
|||
* @param {Number} y0 |
|||
* @param {Number} x1 |
|||
* @param {Number} y1 |
|||
* @return {CanvasGradient} |
|||
* @api public |
|||
*/ |
|||
|
|||
Context2d.prototype.createLinearGradient = function(x0, y0, x1, y1){ |
|||
return new CanvasGradient(x0, y0, x1, y1); |
|||
}; |
|||
|
|||
/** |
|||
* Create a radial gradient at the given point `(x0, y0)` and `(x1, y1)` |
|||
* and radius `r0` and `r1`. |
|||
* |
|||
* @param {Number} x0 |
|||
* @param {Number} y0 |
|||
* @param {Number} r0 |
|||
* @param {Number} x1 |
|||
* @param {Number} y1 |
|||
* @param {Number} r1 |
|||
* @return {CanvasGradient} |
|||
* @api public |
|||
*/ |
|||
|
|||
Context2d.prototype.createRadialGradient = function(x0, y0, r0, x1, y1, r1){ |
|||
return new CanvasGradient(x0, y0, r0, x1, y1, r1); |
|||
}; |
|||
|
|||
/** |
|||
* Reset transform matrix to identity, then apply the given args. |
|||
* |
|||
* @param {...} |
|||
* @api public |
|||
*/ |
|||
|
|||
Context2d.prototype.setTransform = function(){ |
|||
this.resetTransform(); |
|||
this.transform.apply(this, arguments); |
|||
}; |
|||
|
|||
/** |
|||
* Set the fill style with the given css color string. |
|||
* |
|||
* @see exports.parseColor() |
|||
* @api public |
|||
*/ |
|||
|
|||
Context2d.prototype.__defineSetter__('fillStyle', function(val){ |
|||
if (val instanceof CanvasGradient) { |
|||
this.setFillPattern(val); |
|||
} else if ('string' == typeof val) { |
|||
var rgba; |
|||
if (rgba = parseColor(val)) { |
|||
this.lastFillStyle = rgba; |
|||
this.setFillRGBA( |
|||
rgba[0] |
|||
, rgba[1] |
|||
, rgba[2] |
|||
, rgba[3]); |
|||
} |
|||
} |
|||
}); |
|||
|
|||
/** |
|||
* Get the current fill style string. |
|||
* |
|||
* @api public |
|||
*/ |
|||
|
|||
Context2d.prototype.__defineGetter__('fillStyle', normalizedColor('lastFillStyle')); |
|||
|
|||
/** |
|||
* Set the stroke style with the given css color string. |
|||
* |
|||
* @see exports.parseColor() |
|||
* @api public |
|||
*/ |
|||
|
|||
Context2d.prototype.__defineSetter__('strokeStyle', function(val){ |
|||
if (val instanceof CanvasGradient) { |
|||
this.setStrokePattern(val); |
|||
} else if ('string' == typeof val) { |
|||
var rgba; |
|||
if (rgba = parseColor(val)) { |
|||
this.lastStrokeStyle = rgba; |
|||
this.setStrokeRGBA( |
|||
rgba[0] |
|||
, rgba[1] |
|||
, rgba[2] |
|||
, rgba[3]); |
|||
} |
|||
} |
|||
}); |
|||
|
|||
/** |
|||
* Get the current stroke style string. |
|||
* |
|||
* @api public |
|||
*/ |
|||
|
|||
Context2d.prototype.__defineGetter__('strokeStyle', normalizedColor('lastStrokeStyle')); |
|||
|
|||
/** |
|||
* Set the shadow color with the given css color string. |
|||
* |
|||
* @see exports.parseColor() |
|||
* @api public |
|||
*/ |
|||
|
|||
Context2d.prototype.__defineSetter__('shadowColor', function(val){ |
|||
if ('string' == typeof val) { |
|||
var rgba; |
|||
if (rgba = parseColor(val)) { |
|||
this.lastShadowColor = rgba; |
|||
this.setShadowRGBA( |
|||
rgba[0] |
|||
, rgba[1] |
|||
, rgba[2] |
|||
, rgba[3]); |
|||
} |
|||
} |
|||
}); |
|||
|
|||
/** |
|||
* Get the current shadow color string. |
|||
* |
|||
* @api public |
|||
*/ |
|||
|
|||
Context2d.prototype.__defineGetter__('shadowColor', normalizedColor('lastShadowColor')); |
|||
|
|||
/** |
|||
* Set font. |
|||
* |
|||
* @see exports.parseFont() |
|||
* @api public |
|||
*/ |
|||
|
|||
Context2d.prototype.__defineSetter__('font', function(val){ |
|||
if ('string' == typeof val) { |
|||
var font; |
|||
if (font = cache[val] || parseFont(val)) { |
|||
this.lastFontString = val; |
|||
|
|||
// TODO: dpi
|
|||
// TODO: remaining unit conversion
|
|||
switch (font.unit) { |
|||
case 'pt': |
|||
font.size /= .75; |
|||
break; |
|||
case 'in': |
|||
font.size *= 96; |
|||
break; |
|||
case 'mm': |
|||
font.size *= 96.0 / 25.4; |
|||
break; |
|||
case 'cm': |
|||
font.size *= 96.0 / 2.54; |
|||
break; |
|||
} |
|||
|
|||
// Cache font object
|
|||
cache[val] = font; |
|||
|
|||
// Set font
|
|||
this.setFont( |
|||
font.weight |
|||
, font.style |
|||
, font.size |
|||
, font.unit |
|||
, font.family); |
|||
} |
|||
} |
|||
}); |
|||
|
|||
/** |
|||
* Get the current font. |
|||
* |
|||
* @api public |
|||
*/ |
|||
|
|||
Context2d.prototype.__defineGetter__('font', function(){ |
|||
return this.lastFontString || '10px sans-serif'; |
|||
}); |
|||
|
|||
/** |
|||
* Set text baseline. |
|||
* |
|||
* @api public |
|||
*/ |
|||
|
|||
Context2d.prototype.__defineSetter__('textBaseline', function(val){ |
|||
var n = baselines.indexOf(val); |
|||
if (~n) { |
|||
this.lastBaseline = val; |
|||
this.setTextBaseline(n); |
|||
} |
|||
}); |
|||
|
|||
/** |
|||
* Get the current baseline setting. |
|||
* |
|||
* @api public |
|||
*/ |
|||
|
|||
Context2d.prototype.__defineGetter__('textAlign', function(){ |
|||
return this.lastBaseline || 'alphabetic'; |
|||
}); |
|||
|
|||
/** |
|||
* Set text alignment. |
|||
* |
|||
* @api public |
|||
*/ |
|||
|
|||
Context2d.prototype.__defineSetter__('textAlign', function(val){ |
|||
switch (val) { |
|||
case 'center': |
|||
this.setTextAlignment(0); |
|||
this.lastTextAlignment = val; |
|||
break; |
|||
case 'left': |
|||
case 'start': |
|||
this.setTextAlignment(-1); |
|||
this.lastTextAlignment = val; |
|||
break; |
|||
case 'right': |
|||
case 'end': |
|||
this.setTextAlignment(1); |
|||
this.lastTextAlignment = val; |
|||
break; |
|||
} |
|||
}); |
|||
|
|||
/** |
|||
* Get the current font. |
|||
* |
|||
* @see exports.parseFont() |
|||
* @api public |
|||
*/ |
|||
|
|||
Context2d.prototype.__defineGetter__('textAlign', function(){ |
|||
return this.lastTextAlignment || 'start'; |
|||
}); |
|||
Loading…
Reference in new issue