textDisplay.js

(function() {
	"use strict";
	var characters = "abcdefghijklmnopqrstuvwxyz?!.:,-<>";
	var numbers = "0123456789"
	var sizeChar = 128;
	var kerningDefault = {
		"a": 25,
		"b": 25,
		"c": 25,
		"d": 24,
		"e": 31,
		"f": 31,
		"g": 22,
		"h": 26,
		"i": 28,
		"j": 33,
		"k": 25,
		"l": 30,
		"m": 23,
		"n": 24,
		"o": 20,
		"p": 27,
		"q": 20,
		"r": 25,
		"s": 25,
		"t": 23,
		"u": 23,
		"v": 17,
		"w": 22,
		"x": 22,
		"y": 19,
		"z": 25,
		"?": 35,
		"!": 50,
		".": 50,
		":": 50,
		",": 43,
		"-": 41,
		"<": 15,
		">": 15,
		"0": 25,
		"1": 25,
		"2": 25,
		"3": 25,
		"4": 25,
		"5": 25,
		"6": 25,
		"7": 25,
		"8": 25,
		"9": 25
	}

	function TextDisplay(maxWidth, imageLetter, imageNumber, kerning) {
		this.kerning = (kerning || kerningDefault)
		this.image = document.createElement("canvas");
		this.ctx = this.image.getContext("2d");
		this.image.width = maxWidth;
		this.image.height = 128;
		this.imageLetter = imageLetter;
		this.imageNumber = imageNumber;
	}

	TextDisplay.prototype.changeText = function(str) {
		this.ctx.clearRect(0,0,this.image.width, this.image.height);
		str.toLowerCase();
		var x = 0;
		var widthC = this.imageLetter.width / characters.length;
		var widthN = this.imageNumber.width / numbers.length;
		for (var i = 0; i < str.length; i++) {
			var pos = characters.indexOf(str[i]);
			var posN = numbers.indexOf(str[i]);
			if (pos>=0) {
				this.ctx.drawImage(this.imageLetter, pos*widthC, 0, widthN, 128, x-this.kerning[str[i]], 0, widthC, 128);
				x+=widthC - this.kerning[str[i]]*2;
			} else if (posN>=0) {
				this.ctx.drawImage(this.imageNumber, posN*widthN, 0, widthN, 128, x-this.kerning[str[i]], 0, widthN, 128);
				x+=widthN - this.kerning[str[i]]*2;
			} else {
				x+=75;
			}
		}
		this.width =  x;
	};

	TextDisplay.prototype.draw = function(ctx,x,y,height,dir,h) {
		height = (height || 128);
		var heightFactor = height/128;
		x /= heightFactor;
		if(dir=="center") {x=x-this.width/2;}
		if(dir=="right") {x=x-this.width;}
		ctx.save()
		ctx.scale(heightFactor,heightFactor);
		ctx.drawImage(this.image, x, y/heightFactor);
		ctx.restore();
	};
	TextDisplay.prototype.size = function(height) {
		height = (height || 128);
		var heightFactor = height/128;
		return this.width * heightFactor;
	};

	/*********************************************************\
		MULTI EXPORT
	\*********************************************************/
	
	if (typeof exports === 'object') {
        module.exports = TextDisplay;
    } else if (typeof define === 'function') {
        define(function() { return TextDisplay; });
    } else if (typeof GrifGame === 'object') {
        GrifGame.TextDisplay = TextDisplay;
    } else {
        this.TextDisplay = TextDisplay;
    }
}).call(function() {
    return this || (typeof window !== 'undefined' ? window : global);
}());