Overriding drawLineText method of CreateJS
I needed to superscript some specific characters in a dynamic text field in CreateJS , so I built a prototype function to do just that.
createjs.Text.prototype._drawTextLine = function (ctx, text, y) {
// Chrome 17 will fail to draw the text if the last param is included but null, so we feed it a large value instead:
if (this.outline) {
ctx.strokeText(text, 0, y, this.maxWidth || 0xFFFF);
} else {
var x = 0;
if (/(®|†)/.test(text)) {
var textArr = text.split(/(®|†)/g);
var pxInd = this.font.search(/px/);
var fntSz = this.font.substring(pxInd - 2, pxInd);
var fntFc = this.font.substring(pxInd + 2);
var supSz = Math.round(fntSz * 0.5);
var supFont = supSz + "px " + fntFc;
var div = (this.textAlign == "center") ? 2 : 1; // to fix placement with "center" aligned text
for (var t = 0, l = textArr.length; t < l; t++) {
if (/(®|†)/.test(textArr[t])) {
ctx.font = supFont;
ctx.fillText(textArr[t], x, y, this.maxWidth || 0xFFFF);
} else {
ctx.font = this.font;
ctx.fillText(textArr[t], x, y, this.maxWidth || 0xFFFF);
}
x += ctx.measureText(textArr[t]).width / div;
}
} else {
ctx.fillText(text, x, y, this.maxWidth || 0xFFFF);
}
}
};
Leave a Reply