konva/lib/Text.js

///////////////////////////////////////////////////////////////////////
//  Text
///////////////////////////////////////////////////////////////////////
/**
 * Text constructor
 * @param {Object} config
 */
Kinetic.Text = function(config){

    /*
     * defaults
     */
    if (config.textStroke !== undefined || config.textStrokeWidth !== undefined) {
        if (config.textStroke === undefined) {
            config.textStroke = "black";
        }
        else if (config.textStrokeWidth === undefined) {
            config.textStrokeWidth = 2;
        }
    }
    if (config.align === undefined) {
        config.align = "left";
    }
    if (config.verticalAlign === undefined) {
        config.verticalAlign = "top";
    }
    if (config.padding === undefined) {
        config.padding = 0;
    }
    
    config.drawFunc = function(){
        var canvas = this.getCanvas();
        var context = this.getContext();
        context.font = this.fontSize + "pt " + this.fontFamily;
        context.textBaseline = "middle";
        var metrics = context.measureText(this.text);
        var textHeight = this.fontSize;
        var textWidth = metrics.width;
        var p = this.padding;
        var x = 0;
        var y = 0;
        
        switch (this.align) {
            case "center":
                x = textWidth / -2 - p;
                break;
            case "right":
                x = -1 * textWidth - p;
                break;
        }
        
        switch (this.verticalAlign) {
            case "middle":
                y = textHeight / -2 - p;
                break;
            case "bottom":
                y = -1 * textHeight - p;
                break;
        }
        
        // draw path
        context.save();
        context.beginPath();
        context.rect(x, y, textWidth + p * 2, textHeight + p * 2);
        context.closePath();
        this.fillStroke();
        context.restore();
        
        var tx = p + x;
        var ty = textHeight / 2 + p + y;
        
        // draw text
        if (this.textFill !== undefined) {
            context.fillStyle = this.textFill;
            context.fillText(this.text, tx, ty);
        }
        if (this.textStroke !== undefined || this.textStrokeWidth !== undefined) {
            // defaults
            if (this.textStroke === undefined) {
                this.textStroke = "black";
            }
            else if (this.textStrokeWidth === undefined) {
                this.textStrokeWidth = 2;
            }
            context.lineWidth = this.textStrokeWidth;
            context.strokeStyle = this.textStroke;
            context.strokeText(this.text, tx, ty);
        }
    };
    
    // call super constructor
    Kinetic.Shape.apply(this, [config]);
};

/*
 * Text methods
 */
Kinetic.Text.prototype = {
    setFontFamily: function(fontFamily){
        this.fontFamily = fontFamily;
    },
    getFontFamily: function(){
        return this.fontFamily;
    },
    setFontSize: function(fontSize){
        this.fontSize = fontSize;
    },
    getFontSize: function(){
        return this.fontSize;
    },
    setTextFill: function(textFill){
        this.textFill = textFill;
    },
    getTextFill: function(){
        return this.textFill;
    },
    setTextStroke: function(textStroke){
        this.textStroke = textStroke;
    },
    getTextStroke: function(){
        return this.textStroke;
    },
    setTextStrokeWidth: function(textStrokeWidth){
        this.textStrokeWidth = textStrokeWidth;
    },
    getTextStrokeWidth: function(){
        return this.textStrokeWidth;
    },
    setPadding: function(padding){
        this.padding = padding;
    },
    getPadding: function(){
        return this.padding;
    },
    setAlign: function(align){
        this.align = align;
    },
    getAlign: function(){
        return this.align;
    },
    setVerticalAlign: function(verticalAlign){
        this.verticalAlign = verticalAlign;
    },
    getVerticalAlign: function(){
        return this.verticalAlign;
    },
    setText: function(text){
        this.text = text;
    },
    getText: function(){
        return this.text;
    }
};
// extend Shape
Kinetic.GlobalObject.extend(Kinetic.Text, Kinetic.Shape);