KinetcJS - Centered text along TextPath

by Vijay Gujar

HTML

<label>Enter Text:</label>
<input type="text" id="textVal" onkeyup="updateText(this.value)" value="This is centred text!" />
<div id="container"></div>

CSS

body {
    margin: 0px;
    padding: 0px;
}

JavaScript

(function () {
    Kinetic.MyTextPath = function (config) {
        this._initMyTextPath(config);
    };

    Kinetic.MyTextPath.prototype = {
        _initMyTextPath: function (config) {
            Kinetic.TextPath.call(this, config);
        },
        _setTextData: function () {
            this.attrs.text = ' ' + this.attrs.text;
            var that = this;
            var size = this._getTextSize(this.attrs.text);
            this.textWidth = size.width;
            this.textHeight = size.height;

            this.glyphInfo = [];

            var charArr = this.attrs.text.split('');

            var p0, p1, pathCmd;



            var pIndex = -1;
            var currentT = 0;
            var startPos = 0;

            // http://stackoverflow.com/questions/16010275/how-to-center-text-along-kinetic-textpath-with-kineticjs
            // get the length of the path and subtract the text lenght and divide by 2 to get the center
            var plen = 0;
            for (var i = 0; i < that.dataArray.length; i++) {
                plen += that.dataArray[i].pathLength;
            }
            startPos = Math.round((plen - that.textWidth) / 2);

            var getNextPathSegment = function () {
                currentT = 0;
                var pathData = that.dataArray;

                for (var i = pIndex + 1; i < pathData.length; i++) {
                    if (pathData[i].pathLength > 0) {
                        pIndex = i;

                        return pathData[i];
                    } else if (pathData[i].command == 'M') {
                        p0 = {
                            x: pathData[i].points[0],
                            y: pathData[i].points[1]
                        };

                    }
                }

                return {};
            };

            //http://stackoverflow.com/questions/16010275/how-to-center-text-along-kinetic-textpath-with-kineticjs
            // use before to determine glyph width
            var...