implement letter spacing for Text Shape

CHANGELOG.md

@@ -4,6 +4,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Not released][Not released]
 
+## Added
+- new properties for `Konva.Text`: `letterSpacing`
+
+
 ## [1.2.2][2016-09-15]
 
 ### Fixed

konva.js

@@ -12893,7 +12893,7 @@
         WORD = 'word',
         CHAR = 'char',
         NONE = 'none',
-        ATTR_CHANGE_LIST = ['fontFamily', 'fontSize', 'fontStyle', 'fontVariant', 'padding', 'align', 'lineHeight', 'text', 'width', 'height', 'wrap'],
+        ATTR_CHANGE_LIST = ['fontFamily', 'fontSize', 'fontStyle', 'fontVariant', 'padding', 'align', 'lineHeight', 'text', 'width', 'height', 'wrap', 'letterSpacing'],
 
         // cached variables
         attrChangeListLen = ATTR_CHANGE_LIST.length,
@@ -13044,6 +13044,7 @@
                 textArr = this.textArr,
                 textArrLen = textArr.length,
                 totalWidth = this.getWidth(),
+                letterSpacing = this.getLetterSpacing(),
                 n;
 
             context.setAttr('font', this._getContextFont());
@@ -13074,9 +13075,18 @@
                     context.translate((totalWidth - width - p * 2) / 2, 0);
                 }
 
-                this.partialText = text;
+                if (letterSpacing > 0) {
+                  for(var li = 0; li < text.length; li++) {
+                    var letter = text[li];
+                    this.partialText = letter;
+                    context.fillStrokeShape(this);
+                    context.translate(this._getTextSize(letter).width + letterSpacing, 0);
+                  }
+                } else {
+                  this.partialText = text;
 
-                context.fillStrokeShape(this);
+                  context.fillStrokeShape(this);
+                }
                 context.restore();
                 context.translate(0, lineHeightPx);
             }
@@ -13166,7 +13176,10 @@
             return this.textArr.push({text: line, width: width});
         },
         _getTextWidth: function (text) {
-            return dummyContext.measureText(text).width;
+            var latterSpacing = this.getLetterSpacing();
+            var length = text.length;
+            return dummyContext.measureText(text).width +
+              (length ? latterSpacing * (length - 1) : 0);
         },
         _setTextData: function () {
             var lines = this.getText().split('\n'),
@@ -13419,6 +13432,16 @@
      * text.wrap('word');
      */
 
+     Konva.Factory.addGetterSetter(Konva.Text, 'letterSpacing', 0);
+
+      /**
+       * set letter spacing property. Default value is 0.
+       * @name letterSpacing
+       * @method
+       * @memberof Konva.TextPath.prototype
+       * @param {Number} letterSpacing
+       */
+
     Konva.Factory.addGetter(Konva.Text, 'text', EMPTY_STRING);
     Konva.Factory.addOverloadedGetterSetter(Konva.Text, 'text');
 

src/shapes/Text.js

@@ -20,7 +20,7 @@
         WORD = 'word',
         CHAR = 'char',
         NONE = 'none',
-        ATTR_CHANGE_LIST = ['fontFamily', 'fontSize', 'fontStyle', 'fontVariant', 'padding', 'align', 'lineHeight', 'text', 'width', 'height', 'wrap'],
+        ATTR_CHANGE_LIST = ['fontFamily', 'fontSize', 'fontStyle', 'fontVariant', 'padding', 'align', 'lineHeight', 'text', 'width', 'height', 'wrap', 'letterSpacing'],
 
         // cached variables
         attrChangeListLen = ATTR_CHANGE_LIST.length,
@@ -102,6 +102,7 @@
                 textArr = this.textArr,
                 textArrLen = textArr.length,
                 totalWidth = this.getWidth(),
+                letterSpacing = this.getLetterSpacing(),
                 n;
 
             context.setAttr('font', this._getContextFont());
@@ -132,9 +133,18 @@
                     context.translate((totalWidth - width - p * 2) / 2, 0);
                 }
 
-                this.partialText = text;
+                if (letterSpacing > 0) {
+                  for(var li = 0; li < text.length; li++) {
+                    var letter = text[li];
+                    this.partialText = letter;
+                    context.fillStrokeShape(this);
+                    context.translate(this._getTextSize(letter).width + letterSpacing, 0);
+                  }
+                } else {
+                  this.partialText = text;
 
-                context.fillStrokeShape(this);
+                  context.fillStrokeShape(this);
+                }
                 context.restore();
                 context.translate(0, lineHeightPx);
             }
@@ -224,7 +234,10 @@
             return this.textArr.push({text: line, width: width});
         },
         _getTextWidth: function (text) {
-            return dummyContext.measureText(text).width;
+            var latterSpacing = this.getLetterSpacing();
+            var length = text.length;
+            return dummyContext.measureText(text).width +
+              (length ? latterSpacing * (length - 1) : 0);
         },
         _setTextData: function () {
             var lines = this.getText().split('\n'),
@@ -477,6 +490,16 @@
      * text.wrap('word');
      */
 
+     Konva.Factory.addGetterSetter(Konva.Text, 'letterSpacing', 0);
+
+      /**
+       * set letter spacing property. Default value is 0.
+       * @name letterSpacing
+       * @method
+       * @memberof Konva.TextPath.prototype
+       * @param {Number} letterSpacing
+       */
+
     Konva.Factory.addGetter(Konva.Text, 'text', EMPTY_STRING);
     Konva.Factory.addOverloadedGetterSetter(Konva.Text, 'text');
 

test/unit/shapes/Text-test.js

@@ -82,6 +82,24 @@ suite('Text', function(){
         assert.equal(text.getClassName(),'Text', 'getClassName should be Text');
     });
 
+    // ======================================================
+    test('add text with letter spacing', function() {
+        var stage = addStage();
+        var layer = new Konva.Layer();
+
+        stage.add(layer);
+        var text = new Konva.Text({
+          text: 'hello'
+        });
+        layer.add(text);
+        layer.draw();
+
+        var oldWidth = text.width();
+        text.letterSpacing(10);
+
+        assert.equal(text.width(), oldWidth + 40);
+        layer.draw();
+    });
     // ======================================================
     test('text getters and setters', function() {
         var stage = addStage();