Fabric JS行高和单个字符的字符间距答案

【问题标题】：Fabric JS line height and char spacing on individual characterFabric JS行高和单个字符的字符间距
【发布时间】：2021-09-11 09:44:10
【问题描述】：

有没有办法在单个字符上添加字符间距和行高？我在这里有一些东西可供参考，但无法在开发中复制相同的东西： https://www.papier.com/customise/spring-wildflowers-8451

这里是小提琴链接： https://jsfiddle.net/tLy9eqj6/

var canvas=new fabric.Canvas('canv');

var iTextSample = new fabric.IText('hello\nworld', {
  left: 50,
  top: 50,
  fontFamily: 'Helvetica',
  fill: '#333',
  lineHeight: 1.1,
  styles: {
    0: {
      0: { textDecoration: 'underline', fontSize: 80 },
      1: { textBackgroundColor: 'red' }
    },
    1: {
      0: { textBackgroundColor: 'rgba(0,255,0,0.5)' },
      4: { fontSize: 20 }
    }
  }
});

canvas.add(iTextSample);

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.js"></script>

<canvas id="canv" width="250" height="300" style="border: 1px solid rgb(204, 204, 204); width: 400px; height: 400px; -webkit-user-select: none;"></canvas>

【问题讨论】：

在更改文本时显示您的代码 sn-p。

标签： javascript html css canvas fabricjs

【解决方案1】：

这里是单个 charSpacing 和 lineHeight 的小提琴链接： https://jsfiddle.net/5tjoyazk/7/

var canvas=new fabric.Canvas('canv');
var i = 0
var j=0
var l=0
fabric.Text.prototype.getStyleAtPosition=function(position, complete) {

      var loc = this.get2DCursorLocation(position),
          style = complete ? this.getCompleteStyleDeclaration(loc.lineIndex, loc.charIndex) :
            this._getStyleDeclaration(loc.lineIndex, loc.charIndex);
      return style || {};
    }

function getStyle(object, styleName) {
  return (object.getStyleAtPosition && object.isEditing) ?
    object.getStyleAtPosition(object.selectionStart)[styleName] : object[styleName];
}

fabric.Text.prototype._getWidthOfCharSpacing= function() {
            //console.log("test",this.text.length)
            char=this.getStyleAtPosition(i)['charSp']
      if (typeof char !== 'undefined') {
                if(this.text.length==i){
        i=0;
        }
        else
         i++;
        return char;
        //return this.fontSize * char / 1000;
        
      
        }  
                if(this.text.length==i){
            i=0;
            }
          else
                    i++;
  
          return 0;
          
    };

fabric.Text.prototype.getHeightOfLine=function(lineIndex) {
            lineh=this.getStyleAtPosition(i)['lheight']
      i++;
      if (this.__lineHeights[lineIndex]) {
        j++
        return this.__lineHeights[lineIndex];
      }

      var line = this._textLines[lineIndex],
          // char 0 is measured before the line cycle because it nneds to char
          // emptylines
          maxHeight = this.getHeightOfChar(lineIndex, 0);
          maxLheight=1
          
      for (var i = 0, len = line.length; i < len; i++) {
        maxHeight = Math.max(this.getHeightOfChar(lineIndex, i), maxHeight);
        if (typeof this.getStyleAtPosition(j)['lheight'] !=="undefined"){
        maxLheight=Math.max(this.getStyleAtPosition(j)['lheight'],maxLheight)}
        k=lineIndex;
        if( k!==l){
        j++
        
        }

        l=lineIndex;
        if (this.text.length == j){
        j=0;
        }

        j++;

      }

      return this.__lineHeights[lineIndex] =( maxHeight+maxLheight) * this.lineHeight * this._fontSizeMult;
    }

var iTextSample = new fabric.IText('hello\nworld\nhello', {
  left: 50,
  top: 50,
  fontFamily: 'Helvetica',
  fill: '#333',
  lineHeight: 1,
  charSpacing:300,
  styles: {
    0: {
      0: { textDecoration: 'underline',fontSize:80,charSp:22,lheight:1 },
      1: { textBackgroundColor: 'red',fontSize: 75,charSp:10 },
      2: { textBackgroundColor: 'red',fontSize: 75,charSp:10,lheight:1 }
    },
    1: {
      0: { textBackgroundColor: 'rgba(0,255,0,0.5)',charSp:20 },
      1: { fontSize: 10,charSp:30 },
      4: { fontSize: 20,charSp:30,lheight:10}
    },
    2: {
      0: { textBackgroundColor: 'rgba(0,255,0,0.5)',charSp:20 },
      1: { fontSize: 10,charSp:30 },
      4: { fontSize: 20,charSp:30,lheight:20}
    }
  }
});
canvas.add(iTextSample);

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id='canv' width=400 height=400></canvas>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

【讨论】：

还有什么函数可以让我们知道这个 _getWidthOfCharSpacing 函数是针对哪个字符索引运行的。在页面更改中使用 i 作为变量会破坏代码。
如果我想为 Textbox 而不是 Itext 这样做，你能给我一个提示吗
@PetterAdam 将文本创建为 fabric.Textbox

【解决方案2】：

给你的例子https://codepen.io/i-prikot/pen/rNmLaYo

function setStyle(object, styleName, value) {
    if (object.setSelectionStyles && object.isEditing) {
      let style = {};
      style[styleName] = value;
      object.setSelectionStyles(style);
    } else {
      object.set(styleName, value)
    }
  
    object.setCoords();
    canvas.requestRenderAll();
}

【讨论】：

默认情况下，fabric JS 不提供单个字符的字符空间和行高。它用于应用于整个 Textbox / 或 itext 。