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

Your email address will not be published. Required fields are marked *