某些字体的字符宽度计算错误，这会使自动缩进 [英] character width calculation wrong with some font which can make auto indent

问题描述

我创建了一个普通的文本框，并在其中输入一些"i"，我使用的字体是Lobster1.3，如您所见，我只是选择了一个字符，但结果不正确这是选择时的最后一个字符位置.看起来像Lobster1.3这样可以自动缩进的字体会使某些字符宽度计算错误

i create a normal textbox and type some "i"s inside,the font i use is Lobster1.3,as you can see,i just selection one character,but the result is not correctly and this is the last character position while in selection. it looks that some font like Lobster1.3 which can make auto indent can make some character width calculation wrong

推荐答案

在创建使用该字体的fabricObject之前，必须确保字体已正确加载到画布上，如果没有，fabricjs将创建一个必须宽度的字符缓存手动删除以获得好的.

You have to ensure the font is properly loaded on the canvas before creating a fabricObject that uses it, if not fabricjs creates a cache of characters width that you have to manually delete to get the good one.

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>

这篇关于某些字体的字符宽度计算错误，这会使自动缩进的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！