Merge pull request #825 from singlebrook/text_font-variant_attribute

add font-variant support to Text and TextPath

src/plugins/TextPath.js

@@ -13,6 +13,7 @@
      * @param {String} [config.fontFamily] default is Calibri
      * @param {Number} [config.fontSize] default is 12
      * @param {String} [config.fontStyle] can be normal, bold, or italic.  Default is normal
+     * @param {String} [config.fontVariant] can be normal or small-caps.  Default is normal
      * @param {String} config.text
      * @param {String} config.data SVG data string
      * @@shapeParams
@@ -367,6 +368,23 @@
      * @memberof Kinetic.TextPath.prototype
      */
 
+    Kinetic.Factory.addGetterSetter(Kinetic.TextPath, 'fontVariant', NORMAL);
+
+    /**
+     * set font variant.  Can be 'normal' or 'small-caps'.  'normal' is the default.
+     * @name setFontVariant
+     * @method
+     * @memberof Kinetic.TextPath.prototype
+     * @param {String} fontVariant
+     */
+
+    /**
+     * @get font variant
+     * @name getFontVariant
+     * @method
+     * @memberof Kinetic.TextPath.prototype
+     */
+
     Kinetic.Factory.addGetter(Kinetic.TextPath, 'text', EMPTY_STRING);
 
     /**

src/shapes/Text.js

@@ -18,7 +18,7 @@
         WORD = 'word',
         CHAR = 'char',
         NONE = 'none',
-        ATTR_CHANGE_LIST = ['fontFamily', 'fontSize', 'fontStyle', 'padding', 'align', 'lineHeight', 'text', 'width', 'height', 'wrap'],
+        ATTR_CHANGE_LIST = ['fontFamily', 'fontSize', 'fontStyle', 'fontVariant', 'padding', 'align', 'lineHeight', 'text', 'width', 'height', 'wrap'],
 
         // cached variables
         attrChangeListLen = ATTR_CHANGE_LIST.length,
@@ -33,6 +33,7 @@
      * @param {String} [config.fontFamily] default is Arial
      * @param {Number} [config.fontSize] in pixels.  Default is 12
      * @param {String} [config.fontStyle] can be normal, bold, or italic.  Default is normal
+     * @param {String} [config.fontVariant] can be normal or small-caps.  Default is normal
      * @param {String} config.text
      * @param {String} [config.align] can be left, center, or right
      * @param {Number} [config.padding]
@@ -193,7 +194,7 @@
             };
         },
         _getContextFont: function() {
-            return this.getFontStyle() + SPACE + this.getFontSize() + PX_SPACE + this.getFontFamily();
+            return this.getFontStyle() + SPACE + this.getFontVariant() + SPACE + this.getFontSize() + PX_SPACE + this.getFontFamily();
         },
         _addTextLine: function (line, width) {
             return this.textArr.push({text: line, width: width});
@@ -220,7 +221,7 @@
 
             this.textArr = [];
             dummyContext.save();
-            dummyContext.font = this.getFontStyle() + SPACE + fontSize + PX_SPACE + this.getFontFamily();
+            dummyContext.font = this._getContextFont();
             for (var i = 0, max = lines.length; i < max; ++i) {
                 var line = lines[i],
                     lineWidth = this._getTextWidth(line);
@@ -362,6 +363,23 @@
      * text.fontStyle('bold');
      */
 
+    Kinetic.Factory.addGetterSetter(Kinetic.Text, 'fontVariant', NORMAL);
+
+    /**
+     * set font variant.  Can be 'normal' or 'small-caps'.  'normal' is the default.
+     * @name fontVariant
+     * @method
+     * @memberof Kinetic.Text.prototype
+     * @param {String} fontVariant
+     * @returns {String}
+     * @example
+     * // get font variant<br>
+     * var fontVariant = text.fontVariant();<br><br>
+     *
+     * // set font variant<br>
+     * text.fontVariant('small-caps');
+     */
+
     Kinetic.Factory.addGetterSetter(Kinetic.Text, 'padding', 0);
 
     /**

test/unit/shapes/Text-test.js

@@ -67,6 +67,7 @@ suite('Text', function(){
             fontSize: 50,
             fontFamily: 'Calibri',
             fontStyle: 'normal',
+            fontVariant: 'normal',
             fill: '#888',
             stroke: '#333',
             align: 'right',
@@ -97,6 +98,7 @@ suite('Text', function(){
         assert.equal(text.getFontSize(), 50);
         assert.equal(text.getFontFamily(), 'Calibri');
         assert.equal(text.getFontStyle(), 'normal');
+        assert.equal(text.getFontVariant(), 'normal');
         assert.equal(text.getFill(), '#888');
         assert.equal(text.getStroke(), '#333');
         assert.equal(text.getAlign(), 'right');
@@ -117,6 +119,7 @@ suite('Text', function(){
         text.setFontSize(10);
         text.setFontFamily('Arial');
         text.setFontStyle('bold');
+        text.setFontVariant('small-caps');
         text.setFill('green');
         text.setStroke('yellow');
         text.setAlign('left');
@@ -132,6 +135,7 @@ suite('Text', function(){
         assert.equal(text.getFontSize(), 10);
         assert.equal(text.getFontFamily(), 'Arial');
         assert.equal(text.getFontStyle(), 'bold');
+        assert.equal(text.getFontVariant(), 'small-caps');
         assert.equal(text.getFill(), 'green');
         assert.equal(text.getStroke(), 'yellow');
         assert.equal(text.getAlign(), 'left');