added new getTextSize(), getTextWidth(), and getTextHeight() methods

dist/kinetic-core.js

@@ -2508,9 +2508,8 @@ Kinetic.Text = function(config) {
         var context = this.getContext();
         context.font = this.fontStyle + ' ' + this.fontSize + 'pt ' + this.fontFamily;
         context.textBaseline = 'middle';
-        var metrics = context.measureText(this.text);
+        var textHeight = this.getTextHeight();
-        var textHeight = textHeight = parseInt(this.fontSize, 10);
+        var textWidth = this.getTextWidth();
-        var textWidth = metrics.width;
         var p = this.padding;
         var x = 0;
         var y = 0;
@@ -2699,6 +2698,32 @@ Kinetic.Text.prototype = {
      */
     getText: function() {
         return this.text;
+    },
+    /**
+     * get text width in pixels
+     */
+    getTextWidth: function() {
+        return this.getTextSize().width;
+    },
+    /**
+     * get text height in pixels
+     */
+    getTextHeight: function() {
+        return this.getTextSize().height;
+    },
+    /**
+     * get text size in pixels
+     */
+    getTextSize: function() {
+        var context = this.getContext();
+        context.save();
+        context.font = this.fontStyle + ' ' + this.fontSize + 'pt ' + this.fontFamily;
+        var metrics = context.measureText(this.text);
+        context.restore();
+        return {
+            width: metrics.width,
+            height: parseInt(this.fontSize, 10)
+        };
     }
 };
 // extend Shape

src/shapes/Text.js

@@ -36,9 +36,8 @@ Kinetic.Text = function(config) {
         var context = this.getContext();
         context.font = this.fontStyle + ' ' + this.fontSize + 'pt ' + this.fontFamily;
         context.textBaseline = 'middle';
-        var metrics = context.measureText(this.text);
+        var textHeight = this.getTextHeight();
-        var textHeight = textHeight = parseInt(this.fontSize, 10);
+        var textWidth = this.getTextWidth();
-        var textWidth = metrics.width;
         var p = this.padding;
         var x = 0;
         var y = 0;
@@ -227,6 +226,32 @@ Kinetic.Text.prototype = {
      */
     getText: function() {
         return this.text;
+    },
+    /**
+     * get text width in pixels
+     */
+    getTextWidth: function() {
+        return this.getTextSize().width;
+    },
+    /**
+     * get text height in pixels
+     */
+    getTextHeight: function() {
+        return this.getTextSize().height;
+    },
+    /**
+     * get text size in pixels
+     */
+    getTextSize: function() {
+        var context = this.getContext();
+        context.save();
+        context.font = this.fontStyle + ' ' + this.fontSize + 'pt ' + this.fontFamily;
+        var metrics = context.measureText(this.text);
+        context.restore();
+        return {
+            width: metrics.width,
+            height: parseInt(this.fontSize, 10)
+        };
     }
 };
 // extend Shape

tests/js/unitTests.js

@@ -905,7 +905,7 @@ Test.prototype.tests = {
         layer.add(rect);
         stage.add(layer);
     },
-    'SHAPES - add text': function(containerId) {
+    'Text - add text': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
             width: 578,
@@ -971,6 +971,35 @@ Test.prototype.tests = {
         test(text.getTextStroke() === 'red', 'text stroke should be red');
         test(text.getTextStrokeWidth() === 10, 'test stroke width should be 10');
     },
+    'Text - get metrics': function(containerId) {
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 578,
+            height: 200
+        });
+        var layer = new Kinetic.Layer();
+
+        var text = new Kinetic.Text({
+            x: stage.width / 2,
+            y: stage.height / 2,
+            text: 'Hello World!',
+            fontSize: 60,
+            fontFamily: 'Calibri',
+            fontStyle: 'normal',
+            textFill: 'green',
+            fontStyle: 'italic',
+            align: 'center',
+            verticalAlign: 'middle'
+        });
+
+        layer.add(text);
+        stage.add(layer);
+
+        test(text.getTextSize().width === 407, 'text width should be 407px');
+        test(text.getTextSize().height === 60, 'text height should be 60px');
+        test(text.getTextWidth() === 407, 'text width should be 407px');
+        test(text.getTextHeight() === 60, 'text height should be 60px');
+    },
     'SHAPES - get shape name': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,