added horizontal align logic back into the Text draw func

dist/kinetic-core.js

@@ -3895,41 +3895,43 @@ Kinetic.Text = function(config) {
     this.dummyCanvas = document.createElement('canvas');
     this.shapeType = "Text";
     this.boxShape = new Kinetic.Rect({});
-
     var that = this;
 
     this.textShape = new Kinetic.Shape({
         drawFunc: function() {
             var context = this.getContext();
+            var p = that.attrs.padding;
+            var lineHeightPx = that.attrs.lineHeight * that.getTextHeight();
+            var textArr = that.textArr;
 
             // sync appliedShadow flag with boxShape
             this.appliedShadow = that.boxShape.appliedShadow;
-
             context.font = that.attrs.fontStyle + ' ' + that.attrs.fontSize + 'pt ' + that.attrs.fontFamily;
             context.textBaseline = 'middle';
             context.textAlign = 'left';
             context.save();
-
-            var p = that.attrs.padding;
-
-            var lineHeightPx = that.attrs.lineHeight * that.getTextHeight();
-
-            // horizontal align
             context.translate(p, 0);
-
-            // vertical align
             context.translate(0, p + that.getTextHeight() / 2);
 
             // draw text lines
-            var textArr = that.textArr;
             for(var n = 0; n < textArr.length; n++) {
                 var text = textArr[n];
+
+                // horizontal alignment
+                context.save();
+                if(that.attrs.align === 'right') {
+                    context.translate(that.getBoxWidth() - that._getTextSize(text).width - p * 2, 0);
+                }
+                else if(that.attrs.align === 'center') {
+                    context.translate((that.getBoxWidth() - that._getTextSize(text).width - p * 2) / 2, 0);
+                }
+
                 this.fillText(text);
                 this.strokeText(text);
+                context.restore();
 
                 context.translate(0, lineHeightPx);
             }
-
             context.restore();
         }
     });
@@ -3941,7 +3943,7 @@ Kinetic.Text = function(config) {
     this.add(this.boxShape);
     this.add(this.textShape);
 
-    // sync attrs
+    // sync attr event bindings
     var attrs = ['width', 'height', 'cornerRadius', 'stroke', 'strokeWidth', 'fill', 'shadow', 'detectionType', 'textFill', 'textStroke', 'textStrokeWidth'];
     var that = this;
     for(var n = 0; n < attrs.length; n++) {

src/shapes/Text.js

@@ -26,41 +26,43 @@ Kinetic.Text = function(config) {
     this.dummyCanvas = document.createElement('canvas');
     this.shapeType = "Text";
     this.boxShape = new Kinetic.Rect({});
-
     var that = this;
 
     this.textShape = new Kinetic.Shape({
         drawFunc: function() {
             var context = this.getContext();
+            var p = that.attrs.padding;
+            var lineHeightPx = that.attrs.lineHeight * that.getTextHeight();
+            var textArr = that.textArr;
 
             // sync appliedShadow flag with boxShape
             this.appliedShadow = that.boxShape.appliedShadow;
-
             context.font = that.attrs.fontStyle + ' ' + that.attrs.fontSize + 'pt ' + that.attrs.fontFamily;
             context.textBaseline = 'middle';
             context.textAlign = 'left';
             context.save();
-
-            var p = that.attrs.padding;
-
-            var lineHeightPx = that.attrs.lineHeight * that.getTextHeight();
-
-            // horizontal align
             context.translate(p, 0);
-
-            // vertical align
             context.translate(0, p + that.getTextHeight() / 2);
 
             // draw text lines
-            var textArr = that.textArr;
             for(var n = 0; n < textArr.length; n++) {
                 var text = textArr[n];
+
+                // horizontal alignment
+                context.save();
+                if(that.attrs.align === 'right') {
+                    context.translate(that.getBoxWidth() - that._getTextSize(text).width - p * 2, 0);
+                }
+                else if(that.attrs.align === 'center') {
+                    context.translate((that.getBoxWidth() - that._getTextSize(text).width - p * 2) / 2, 0);
+                }
+
                 this.fillText(text);
                 this.strokeText(text);
+                context.restore();
 
                 context.translate(0, lineHeightPx);
             }
-
             context.restore();
         }
     });
@@ -72,7 +74,7 @@ Kinetic.Text = function(config) {
     this.add(this.boxShape);
     this.add(this.textShape);
 
-    // sync attrs
+    // sync attr event bindings
     var attrs = ['width', 'height', 'cornerRadius', 'stroke', 'strokeWidth', 'fill', 'shadow', 'detectionType', 'textFill', 'textStroke', 'textStrokeWidth'];
     var that = this;
     for(var n = 0; n < attrs.length; n++) {

tests/js/unitTests.js

@@ -2848,9 +2848,10 @@ Test.prototype.tests = {
             textFill: '#888',
             textStroke: '#333',
             align: 'right',
+            lineHeight: 1.2,
             width: 400,
             height: 100,
-            padding: 40,
+            padding: 10,
             shadow: {
                 color: 'black',
                 blur: 1,
@@ -2884,14 +2885,20 @@ Test.prototype.tests = {
         test(text.getTextFill() == '#888', 'text fill should be #888');
         test(text.getTextStroke() == '#333', 'text fill should be #333');
         test(text.getAlign() === 'right', 'text should be aligned right');
+        test(text.getLineHeight() === 1.2, 'line height should be 1.2');
         test(text.getWidth() === 400, 'width should be 400');
         test(text.getHeight() === 100, 'height should be 100');
-        test(text.getPadding() === 40, 'padding should be 40');
+        test(text.getPadding() === 10, 'padding should be 10');
         test(text.getShadow().color === 'black', 'text box shadow color should be black');
         test(text.getCornerRadius() === 10, 'text box corner radius should be 10');
         test(text.getDraggable() === true, 'text should be draggable');
         test(text.getDetectionType() === 'path', 'text detection type should be path');
 
+        test(text.getBoxWidth() === 400, 'box width should be 400');
+        test(text.getBoxHeight() === 100, 'box height should be 100');
+        test(text.getTextWidth() > 0, 'text width should be greater than 0');
+        test(text.getTextHeight() > 0, 'text height should be greater than 0');
+
         text.setX(1);
         text.setY(2);
         text.setStroke('orange');
@@ -2935,7 +2942,7 @@ Test.prototype.tests = {
         test(text.getDetectionType() === 'pixel', 'text detection type should be pixel');
 
     },
-    '*SHAPE - text multi line': function(containerId) {
+    'SHAPE - text multi line': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
             width: 578,
@@ -2956,6 +2963,7 @@ Test.prototype.tests = {
             textFill: '#555',
             width: 380,
             padding: 20,
+            align: 'center',
             shadow: {
                 color: 'black',
                 blur: 1,