Honor 'deltaY' during rendering

Updated '_renderChar' to adjust 'top' based on 'deltaY' attribute (if present)
fabricjs · Aug 8, 2017 · ac8cfa6 · ac8cfa6
1 parent e4432c8
commit ac8cfa6
Showing 1 changed file with 39 additions and 30 deletions.
diff --git a/src/shapes/text.class.js b/src/shapes/text.class.js
@@ -45,6 +45,9 @@
     'charSpacing',
     'styles'
   );
+
+  const LINE_PADDING = 0.25;
+
   /**
    * Text class
    * @class fabric.Text
@@ -253,7 +256,7 @@
     _measuringContext: null,
 
     /**
-     * Array of properties that define a style unit.
+     * Array of properties that define a style unit (of 'styles').
      * @type {Array}
      * @default
      */
@@ -833,13 +836,13 @@
     },
 
     /**
-     * return height of char in fontSize for a character at lineIndex, charIndex
-     * @param {Number} l line Index
-     * @param {Number} c char index
+     * returns height of character at lineIndex, charIndex
+     * @param {Number} line line Index
+     * @param {Number} char char index
      * @return {Number} fontSize of that character
      */
-    getHeightOfChar: function(l, c) {
-      return this.getValueOfPropertyAt(l, c, 'fontSize');
+    getHeightOfChar: function(line, char) {
+      return this.getValueOfPropertyAt(line, char, 'fontSize');
     },
 
     /**
@@ -896,11 +899,12 @@
      * @param {Number} charIndex position in the line
      * @param {String} [previousChar] character preceding the one to be measured
      */
-    _getGraphemeBox: function(grapheme, lineIndex, charIndex, previousGrapheme, skipLeft) {
-      var charStyle = this.getCompleteStyleDeclaration(lineIndex, charIndex),
-          prevCharStyle = previousGrapheme ? this.getCompleteStyleDeclaration(lineIndex, charIndex - 1) : { },
-          info = this._measureChar(grapheme, charStyle, previousGrapheme, prevCharStyle),
-          kernedWidth = info.kernedWidth, width = info.width;
+    _getGraphemeBox: function(grapheme, lineIndex, charIndex, prevGrapheme, skipLeft) {
+      var style = this.getCompleteStyleDeclaration(lineIndex, charIndex),
+          prevStyle = prevGrapheme ? this.getCompleteStyleDeclaration(lineIndex, charIndex - 1) : { },
+          info = this._measureChar(grapheme, style, prevGrapheme, prevStyle),
+          kernedWidth = info.kernedWidth,
+          width = info.width;
 
       if (this.charSpacing !== 0) {
         width += this._getWidthOfCharSpacing();
@@ -909,7 +913,7 @@
       var box = {
         width: width,
         left: 0,
-        height: charStyle.fontSize,
+        height: style.fontSize,
         kernedWidth: kernedWidth,
       };
       if (charIndex > 0 && !skipLeft) {
@@ -920,32 +924,25 @@
     },
 
     /**
-     * Calculate height of chosen line
-     * height of line is based mainly on fontSize
-     * @private
-     * @param {Number} lineIndex index of the line to calculate
+     * Calculate height of line at 'lineIndex'
+     * @param {Number} lineIndex index of line to calculate
+     * @return {Number}
      */
     getHeightOfLine: function(lineIndex) {
       if (this.__lineHeights[lineIndex]) {
         return this.__lineHeights[lineIndex];
       }
 
-      var line = this._textLines[lineIndex],
-          maxHeight = this.getHeightOfChar(lineIndex, 0);
-
-      for (var i = 1, len = line.length; i < len; i++) {
-        var currentCharHeight = this.getHeightOfChar(lineIndex, i);
-        if (currentCharHeight > maxHeight) {
-          maxHeight = currentCharHeight;
-        }
+      var line = this._textLines[lineIndex], maxHeight = 0;
+      for (var i = 0, len = line.length; i < len; i++) {
+        maxHeight = Math.max(this.getHeightOfChar(lineIndex, i), maxHeight);
       }
-      this.__lineHeights[lineIndex] = maxHeight * this.lineHeight * this._fontSizeMult;
-      return this.__lineHeights[lineIndex];
+
+      return this.__lineHeights[lineIndex] = maxHeight * this.lineHeight * this._fontSizeMult;
     },
 
     /**
-     * calculate text box height
-     * @private
+     * Calculate text box height
      */
     calcTextHeight: function() {
       var lineHeight, height = 0;
@@ -1093,7 +1090,7 @@
      * @param {Number} top Top coordinate
      * @param {Number} lineHeight Height of the line
      */
-    _renderChar: function(method, ctx, lineIndex, charIndex, _char, left, top) {
+    _renderChar: function(method, ctx, lineIndex, charIndex, _char, left, top, lineHeight) {
       var decl = this._getStyleDeclaration(lineIndex, charIndex),
           fullDecl = this.getCompleteStyleDeclaration(lineIndex, charIndex),
           shouldFill = method === 'fillText' && fullDecl.fill,
@@ -1109,6 +1106,17 @@
       if (decl && decl.textBackgroundColor) {
         this._removeShadow(ctx);
       }
+      if (decl && decl.deltaY) {
+        var height = this.getHeightOfChar(lineIndex, charIndex);
+        var deltaY = decl.deltaY;
+        if (deltaY <= 0) {
+          deltaY = height - Math.min(height - deltaY, lineHeight * (1 - LINE_PADDING));
+        } else {
+          deltaY = Math.max(deltaY, lineHeight * LINE_PADDING);
+        }
+        top += deltaY;
+      }
+
       shouldFill && ctx.fillText(_char, left, top);
       shouldStroke && ctx.strokeText(_char, left, top);
       decl && ctx.restore();
@@ -1126,7 +1134,8 @@
               prevStyle.fontSize !== thisStyle.fontSize ||
               prevStyle.fontFamily !== thisStyle.fontFamily ||
               prevStyle.fontWeight !== thisStyle.fontWeight ||
-              prevStyle.fontStyle !== thisStyle.fontStyle
+              prevStyle.fontStyle !== thisStyle.fontStyle ||
+              prevStyle.deltaY != thisStyle.deltaY
       );
     },