字符宽度计算错误的某些字体可以使自动缩进

Question

我创建了一个普通的文本框并输入了一些＆＃34;我在里面，我使用的字体是Lobster1.3，你可以看到，我只选择一个字符，但结果不正确 这是选择时的最后一个角色位置。 它看起来像Lobster1.3这样可以自动缩进的字体会使某些字符宽度计算错误

Answer 1

在创建使用它的fabricObject之前，您必须确保在画布上正确加载字体，否则fabricjs会创建一个字符宽度缓存，您必须手动删除才能获得好的字符。

var jsondata = {
  "objects": [{
    "type": "textbox",
    "originX": "left",
    "originY": "top",
    "left": 50,
    "top": 50,
    "fill": "rgb(0,0,0)",
    "stroke": null,
    "strokeWidth": 0,
    "strokeDashArray": null,
    "strokeLineCap": "butt",
    "strokeLineJoin": "miter",
    "strokeMiterLimit": 10,
    "scaleX": 1.7870722433460076,
    "scaleY": 1.7870722433460076,
    "angle": 0,
    "flipX": false,
    "flipY": false,
    "opacity": 1,
    "shadow": null,
    "visible": true,
    "clipTo": null,
    "backgroundColor": "",
    "fillRule": "nonzero",
    "globalCompositeOperation": "source-over",
    "transformMatrix": null,
    "skewX": 0,
    "skewY": 0,
    "stretchMode": "any",
    "lockScalingX": false,
    "lockUniScaling": false,
    "lockScalingY": true,
    "text": "iiiiiiiii",
    "fontSize": "42",
    "fontWeight": "normal",
    "fontFamily": "Lobster",
    "fontStyle": "",
    "textDecoration": "",
    "textAlign": "left",
    "letterSpacing": 20,
    "lineHeight": 1.16,
    "textBackgroundColor": "",
    "charSpacing": 20,
    "styles": {
      "0": {
        "0": {
          "fill": "#000",
          "stroke": "#000",
          "fontFamily": "Lobster"
        },
        "1": {
          "fill": "#000",
          "stroke": "#000",
          "fontFamily": "Lobster"
        },
        "2": {
          "fill": "#000",
          "stroke": "#000",
          "fontFamily": "Lobster"
        },
        "3": {
          "fill": "#000",
          "stroke": "#000",
          "fontFamily": "Lobster"
        },
        "4": {
          "fill": "#000",
          "stroke": "#000",
          "fontFamily": "Lobster"
        },
        "5": {
          "fill": "#000",
          "stroke": "#000",
          "fontFamily": "Lobster"
        },
        "6": {
          "fill": "#000",
          "stroke": "#000",
          "fontFamily": "Lobster"
        },
        "7": {
          "fill": "#000",
          "stroke": "#000",
          "fontFamily": "Lobster"
        },
        "8": {
          "fill": "#000",
          "stroke": "#000",
          "fontFamily": "Lobster"
        }
      }
    },
    "minWidth": 20,
    "lastCachedStyleObject": {
      "fill": "#000",
      "stroke": "#000",
      "fontFamily": "Lobster"
    }
  }],
  "backgroundData": "#ffffff",
  "width": 1023,
  "height": 637
}


 var canvas = new fabric.Canvas("myCanvas");
  canvas.controlsAboveOverlay = true;
  canvas.backgroundColor = '#FFFFFF';
  
  WebFont.load({
    google: {
      families: ['Lobster']
    },
    active: function() {
    	canvas.loadFromJSON(jsondata, canvas.renderAll.bind(canvas));
    }
  });  

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<canvas id='myCanvas' width='800' height='600'></canvas>

Answer 2

Fabric有一种清除字体缓存的方法，以确保在加载字体并将其应用于文本框对象时不会对边框进行错误的测量。

clearFabricFontCache(fontFamilyopt)

从他们的文档中 http://fabricjs.com/docs/fabric.util.html

清除给定字体系列的字符宽度缓存，如果未指定fontFamily，则清除所有缓存。如果您知道要以惰性方式加载字体并且在将文本对象添加到画布时不等待自定义字体正确加载，请使用它。如果在尚未加载其自身字体时添加文本对象，则会得到错误的度量值以及错误的边界框。清除字体缓存后，更改textObject文本内容或调用initDimensions（）触发重新计算

因此，在这种情况下，您可以编写：

canvas.loadFromJSON(jsonData, () => {
  //clear character cache to ensure bounding boxes for fonts are correct
  fabric.util.clearFabricFontCache();
  canvas.renderAll()
});