Permalink
Browse files

somewhat working labelBlock

  • Loading branch information...
1 parent 4050949 commit 9f3ba272940df91d79bd2058f62232f975414d12 @rolandoam committed Apr 11, 2012
Showing with 111 additions and 27 deletions.
  1. +1 −1 Makefile
  2. +110 −26 chesterGL/labelBlock.js
View
@@ -6,7 +6,7 @@ OUTPUT_DIR ?= ${PWD}/html
# default name for library
OUTPUT_FILE = chester.js
EXTERNAL_SOURCES =
-SOURCES = ${EXTERNAL_SOURCES} chesterGL/core.js chesterGL/block.js chesterGL/blockFrames.js chesterGL/blockGroup.js chesterGL/actions.js chesterGL/tmxBlock.js chesterGL/particleSystem.js chesterGL/primitivesBlock.js
+SOURCES = ${EXTERNAL_SOURCES} chesterGL/core.js chesterGL/block.js chesterGL/blockFrames.js chesterGL/blockGroup.js chesterGL/actions.js chesterGL/tmxBlock.js chesterGL/particleSystem.js chesterGL/primitivesBlock.js chesterGL/labelBlock.js
# externs should live in the same dir as the compiler.jar
EXTERNS = jquery-1.5.js webkit_console.js google_analytics_api.js
COMPILE_LEVEL_RELEASE = ADVANCED_OPTIMIZATIONS
View
@@ -36,41 +36,27 @@ goog.require("chesterGL.Block");
*
* @constructor
* @param {string} text the string to render
- * @param {string=} font the name/family of the font, defaults to "sans-serif"
- * @param {string=} fontSize the size of the font, defaults to '20pt'
- * @param {goog.math.Size=} size the size of the container for the text. Defaults to the width of the text,
- * the height is approximage (rotating the letter m and measuring the width)
+ * @param {string=} font the name/family of the font, defaults to "20pt sans-serif"
+ * @param {string=} fillStyle the style of the font, defaults to 'white'
* @extends {chesterGL.Block}
*/
-chesterGL.LabelBlock = function (text, font, fontSize, size) {
- font = font || "sans-serif";
- fontSize = fontSize || "12pt";
+chesterGL.LabelBlock = function (text, font, fillStyle) {
+ font = font || "20pt sans-serif";
+ fillStyle = fillStyle || "White";
var canvas = document.createElement("canvas");
this.canvas = canvas;
var context = canvas.getContext('2d');
this.context = context;
- context.font = fontSize + " " + font;
-
- // measure the height of the text (assume one line always)
- if (!size) {
- context.save();
- context.rotate(90);
- var height = context.measureText("m").width * 1.15;
- context.restore();
- var width = context.measureText(text).width;
- size = new goog.math.Size(width, height);
- }
- chesterGL.Block.call(this, [0, 0, size.width, size.height]);
+ this.font = font;
+ this.fillStyle = fillStyle;
- canvas.width = size.width;
- canvas.height = size.height;
- context.fillStyle = "Red";
- context.fillText(text, 0, size.height / 2.0);
- this.program = chesterGL.Block.PROGRAM['TEXTURE'];
- this.texture = "" + Math.random() + ".canvas";
+ this.texture = Date.now() + ".canvas";
if (!chesterGL.assets['texture']) chesterGL.assets['texture'] = {};
chesterGL.assets['texture'][this.texture] = canvas;
- chesterGL.defaultTextureHandler(this.texture, canvas);
+
+ chesterGL.Block.call(this, this.resetCanvas(text));
+ this.setText(text, true);
+ this.program = chesterGL.Block.PROGRAM['TEXTURE'];
};
goog.inherits(chesterGL.LabelBlock, chesterGL.Block);
@@ -94,4 +80,102 @@ chesterGL.LabelBlock.prototype.context = null;
*/
chesterGL.LabelBlock.prototype.needsTextUpdate = false;
+/**
+ * the actual string to draw
+ * @ignore
+ * @type {string}
+ */
+chesterGL.LabelBlock.prototype.text = "";
+
+/**
+ * the height of the text (aprox.)
+ * @ignore
+ * @type {number}
+ */
+chesterGL.LabelBlock.prototype.textHeight = 0;
+
+/**
+ * the font that will be used to render the text
+ * @type {string}
+ */
+chesterGL.LabelBlock.prototype.font = "";
+
+/**
+ * the style used to render the text. Need to set the text again
+ * to actually change the style
+ * @type {string}
+ */
+chesterGL.LabelBlock.prototype.fillStyle = "";
+
+/**
+ * sets the text to be displayed. This will reset the underlying canvas and resize it to the size of the text
+ * @param {string} text
+ * @param {boolean=} onlyDraw if true, then just draw the text on the canvas
+ */
+chesterGL.LabelBlock.prototype.setText = function (text, onlyDraw) {
+ this.text = text;
+ if (onlyDraw) {
+ this.drawText();
+ } else {
+ this.setFrame(this.resetCanvas());
+ this.needsTextUpdate = true;
+ }
+};
+
+/**
+ * redraws the text on the offscreen canvas (clearing it first)
+ * @ignore
+ */
+chesterGL.LabelBlock.prototype.drawText = function () {
+ var cx = this.context;
+ var canvas = this.canvas;
+ cx.clearRect(0, 0, canvas.width, canvas.height);
+ cx.fillText(this.text, 0, canvas.height * 0.8);
+ chesterGL.defaultTextureHandler(/** @type {string} */(this.texture), canvas);
+ this.needsTextUpdate = false;
+};
+
+/**
+ * resets the canvas: sets the style, measures the text, changes the canvas size.
+ * Returns an array that can be passed to setFrame().
+ * @ignore
+ * @param {string=} text optional text to set
+ * @returns {Array}
+ */
+chesterGL.LabelBlock.prototype.resetCanvas = function (text) {
+ var cx = this.context;
+ var canvas = this.canvas;
+ cx.font = this.font;
+ cx.fillStyle = this.fillStyle;
+ if (text) {
+ this.text = text;
+ }
+
+ if (this.textHeight == 0) {
+ cx.save();
+ cx.rotate(90);
+ this.textHeight = cx.measureText("M").width * 1.25;
+ cx.restore();
+ }
+ var width = cx.measureText(this.text).width;
+
+ canvas.width = width;
+ canvas.height = this.textHeight;
+ cx.font = this.font;
+ cx.fillStyle = this.fillStyle;
+ return [0, 0, width, this.textHeight];
+};
+
+/**
+ * override visit, update offscreen canvas if needed
+ * @ignore
+ */
+chesterGL.LabelBlock.prototype.visit = function () {
+ if (this.needsTextUpdate) {
+ this.drawText();
+ }
+ chesterGL.Block.prototype.visit.call(this);
+};
+
goog.exportSymbol('chesterGL.LabelBlock', chesterGL.LabelBlock);
+goog.exportProperty(chesterGL.LabelBlock.prototype, 'setText', chesterGL.LabelBlock.prototype.setText);

0 comments on commit 9f3ba27

Please sign in to comment.