Skip to content
This repository has been archived by the owner on Dec 9, 2019. It is now read-only.

Commit

Permalink
Text bounding box reflects alignment settings. Added some docs.
Browse files Browse the repository at this point in the history
  • Loading branch information
Billy Lamberta committed Oct 13, 2010
1 parent 459b8e7 commit eb16d30
Showing 1 changed file with 118 additions and 12 deletions.
130 changes: 118 additions & 12 deletions src/primitives/text.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
* @param {string=} text Text to display.
* @return {doodle.Text} A text object.
* @throws {SyntaxError} Invalid parameters.
* @throws {TypeError} Text argument not a string.
*/
doodle.Text = function (text) {
var text_sprite = Object.create(doodle.Sprite());
Expand All @@ -32,37 +33,50 @@
var $text = '',
font_family = "sans-serif",
font_size = 10,//px
font_height = font_size,
font_style = FontStyle.NORMAL,
font_variant = FontVariant.NORMAL,
font_weight = FontWeight.NORMAL,
text_align = TextAlign.START,
text_baseline = TextBaseline.ALPHABETIC,
text_color = "#000000",
text_strokecolor = "#000000",
text_strokewidth = 1,
text_bgcolor;

/**
* @name redraw
* @private
*/
function redraw () {
//if not part of the scene graph we'll have to whip up a context
var $ctx = text_sprite.context || document.createElement('canvas').getContext('2d'),
sprite_width,
sprite_height;
//need to apply font style to measure with, but don't save it
sprite_height,
graphics = text_sprite.graphics,
extrema_minX = 0,
extrema_maxX = 0,
extrema_minX = 0,
extrema_maxY = 0;

//need to apply font style to measure width, but don't save it
$ctx.save();
$ctx.font = (font_style +' '+ font_variant +' '+ font_weight +' '+
font_size+"px" +' '+ font_family);
//assign sprite dimensions
text_sprite.width = sprite_width = $ctx.measureText($text).width;
text_sprite.height = sprite_height = font_size;
sprite_width = $ctx.measureText($text).width;
sprite_height = font_size;
//estimate font height since there's no built-in functionality
font_height = $ctx.measureText("m").width;
$ctx.restore();

//clears sprite dimensions and drawing commands
text_sprite.graphics.clear();
text_sprite.graphics.draw(function (ctx) {
if (text_bgcolor) {
ctx.fillStyle = text_bgcolor;
ctx.fillRect(0, 0, sprite_width, sprite_height);
}
ctx.lineWidth = 1; //why do i need to set this?
ctx.lineWidth = text_strokewidth; //why do i need to set this?
ctx.textAlign = text_align;
ctx.textBaseline = text_baseline;
ctx.font = (font_style +' '+ font_variant +' '+ font_weight +' '+
Expand All @@ -76,12 +90,64 @@
ctx.strokeText($text, 0, 0);
}
});

//assign sprite dimensions after graphics.clear()
text_sprite.width = sprite_width;
text_sprite.height = sprite_height;

//calculate bounding box extrema
switch (text_baseline) {
case TextBaseline.TOP:
extrema_minY = font_size - font_height;
extrema_maxY = font_size;
break;
case TextBaseline.MIDDLE:
extrema_minY = -font_height/2;
extrema_maxY = font_height/2;
break;
case TextBaseline.BOTTOM:
extrema_minY = -font_size;
break;
case TextBaseline.HANGING:
extrema_minY = font_size - font_height;
extrema_maxY = font_size;
break;
case TextBaseline.ALPHABETIC:
extrema_minY = -font_height;
break;
case TextBaseline.IDEOGRAPHIC:
extrema_minY = -font_size;
break;
}

switch (text_align) {
case TextAlign.START:
break;
case TextAlign.END:
extrema_minX = -sprite_width;
break;
case TextAlign.LEFT:
break;
case TextAlign.RIGHT:
extrema_minX = -sprite_width;
break;
case TextAlign.CENTER:
extrema_minX = -sprite_width/2;
break;
}

//set extrema for bounds
graphics.__minX = extrema_minX;
graphics.__maxX = extrema_maxX;
graphics.__minY = extrema_minY;
graphics.__maxY = extrema_maxY;
}

return {
/**
* @name text
* @return {String}
* @throws {TypeError}
* @property
*/
'text': {
Expand All @@ -100,6 +166,9 @@
/**
* @name font
* @return {String}
* @throws {TypeError}
* @throws {SyntaxError}
* @throws {ReferenceError}
* @property
*/
'font': {
Expand Down Expand Up @@ -146,6 +215,7 @@
/**
* @name fontFamily
* @return {String}
* @throws {TypeError}
* @property
*/
'fontFamily': {
Expand All @@ -163,7 +233,8 @@

/**
* @name fontSize
* @return {Number}
* @return {Number} In pixels.
* @throws {TypeError}
* @property
*/
'fontSize': {
Expand All @@ -185,6 +256,8 @@
/**
* @name fontStyle
* @return {FontStyle}
* @throws {TypeError}
* @throws {SyntaxError}
* @property
*/
'fontStyle': {
Expand All @@ -211,6 +284,8 @@
/**
* @name fontVariant
* @return {FontVariant}
* @throws {TypeError}
* @throws {SyntaxError}
* @property
*/
'fontVariant': {
Expand All @@ -236,6 +311,8 @@
/**
* @name fontWeight
* @return {FontWeight}
* @throws {TypeError}
* @throws {SyntaxError}
* @property
*/
'fontWeight': {
Expand Down Expand Up @@ -278,11 +355,13 @@
},

/**
* @name textAlign
* @name align
* @return {TextAlign}
* @throws {TypeError}
* @throws {SyntaxError}
* @property
*/
'textAlign': {
'align': {
enumerable: true,
configurable: false,
get: function () { return text_align; },
Expand All @@ -306,11 +385,13 @@
},

/**
* @name textBaseline
* @name baseline
* @return {TextBaseline}
* @throws {TypeError}
* @throws {SyntaxError}
* @property
*/
'textBaseline': {
'baseline': {
enumerable: true,
configurable: false,
get: function () { return text_baseline; },
Expand All @@ -334,9 +415,32 @@
}
},

/**
* @name strokeWidth
* @return {Number}
* @throws {TypeError}
* @throws {RangeError}
* @property
*/
'strokeWidth': {
enumerable: true,
configurable: false,
get: function () { return text_strokewidth; },
set: function (widthVar) {
/*DEBUG*/
check_number_type(widthVar, this+'.strokeWidth');
if (widthVar <= 0) {
throw new RangeError(this+".strokeWidth: Value must be greater than zero.");
}
/*END_DEBUG*/
text_strokewidth = widthVar;
}
},

/**
* @name color
* @return {Color}
* @throws {TypeError}
* @property
*/
'color': {
Expand All @@ -359,6 +463,7 @@
/**
* @name strokeColor
* @return {Color}
* @throws {TypeError}
* @property
*/
'strokeColor': {
Expand All @@ -381,6 +486,7 @@
/**
* @name backgroundColor
* @return {Color}
* @throws {TypeError}
* @property
*/
'backgroundColor': {
Expand Down

0 comments on commit eb16d30

Please sign in to comment.