fabricjs IText：半透明时重叠字符背景颜色制作线答案

【问题标题】：fabricjs IText: overlapping character background-color making lines when semitransparentfabricjs IText：半透明时重叠字符背景颜色制作线
【发布时间】：2017-03-05 23:31:05
【问题描述】：

我的 itext 对象中出现重叠字符的问题。如图所示，字母背景在某种程度上具有错误的偏移或/和宽度。我无法追查错误。也许这是我网站上的一些 css，但我不知道 css 如何影响 itext 对象。这是对象内边距设置为 0 时的样子。宽度超出了右边界！

我试图在小提琴中重现错误，但当然没有成功。 https://jsfiddle.net/FlemmingH/z74whhtn/

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

var iTextSample = new fabric.IText('BOX', {
  left: -200,
  top: 20,
  fontFamily: 'Helvetica',
  fill: '#333',
  lineHeight: 1.1,
  styles: {
    0: {
      0: { textBackgroundColor: 'rgba(0,0,255,0.3)' , fontSize: 420 },
      1: { textBackgroundColor: 'rgba(0,255,0,0.3)', fontSize: 420  },
      2: { textBackgroundColor: 'rgba(255,0,0,0.3)', fontSize: 420  }

    }
  }
});
canvas.add(iTextSample);

编辑 1 - fabric.js 中的舍入错误？？？ 好的，现在错误是可重现的！尝试手动放大这个 IText 对象：IText fiddle 从小字体放大时似乎会出现一种舍入错误（在小提琴中我使用了 fontSize:20）。

如下图所示，即使使用fontSize:120.仍然有错误

那么解决这个问题的唯一选择是用大字体大小初始化 IText 对象，然后强制用户缩小它吗？

【问题讨论】：

现在 v1.6.7 一切正常！ :-)

标签： javascript css fabricjs

【解决方案1】：

感谢您将此问题提交给 fabricjs 问题跟踪器。这是一个错误。我正在推动修复它来解决它。字符宽度有额外的1px计算。

【讨论】：