javascript - Fabric JS IText字体根据位置模糊

Question

我正在使用 Fabric JS 实现 Canvas ，并发现了一个有趣的问题。

如图所示，左侧文字字体模糊，右侧文字字体清晰。也就是说，文本在某些地方变得模糊，而在其他地方变得清晰。

Javascript代码

var radius = 50;
var circle2 = new fabric.Circle({
    radius: Math.sqrt(3) * radius / 2,
    fill: '#FFF',
    opacity: 0.5
});

var text2 = new fabric.IText('Anant Jadhav ANANT dfds sdss sd...', {
    fontSize: 10,
    textAlign: "center",
    left: Math.sqrt(3) * radius / 2,
    top: Math.sqrt(3) * radius / 2,
    originX: "center",
    originY: "center",
    lineHeight: 12,
    fontFamily: 'SanFrancisco',
    fontWeight: 'bold',
    fill: '#FFF',
    opacity: 0.5
});

var element1 = new fabric.Group([myPoly, formatted], {
    left: 4 * radius,
    top: Math.sqrt(3) * 5 * radius / 2,
    originX: "center",
    originY: "center",
    //hasBorders: false,
    hasControls: false,
    hasRotatingPoint: false
});
canvas.add(element1);
canvas.renderAll();

var element2 = new fabric.Group([myPoly, formatted], {
    left: 2.5 * radius,
    top: Math.sqrt(3) * 6 * radius / 2,
    originX: "center",
    originY: "center",
    //hasBorders: false,
    hasControls: false,
    hasRotatingPoint: false
});
canvas.add(element2);
canvas.renderAll();

JS Fiddle可见here 。 请任何人建议我可能存在什么问题。

提前致谢。

Answer 1

问题可能出在您特定项目的对象缓存中。

每帧渲染最多 Fabricjs 1.6.6 形状。 从 1.7.0 开始，默认情况下不再如此。 当文本跨像素时，使用小字体很难阅读，操作系统提示和抗锯齿功能会很有帮助。这些也影响 Canvas 。 这些平滑的字体非常适合它们创建的特定位置。

在您的情况下，一旦您创建了一个组，就会创建一个缓存副本。 包含六边形图片和文本的小 Canvas 将被保存，稍后它只会四处移动。

当您将组移动到不同位置时，为一个位置创建的自然锯齿可能看起来很糟糕。如果您不使用鼠标(逐像素移动)定位它，但使用代码，您可能会跨过 2 个像素，并且第一次绘制的抗锯齿效果会变得越来越模糊。

由于您正在绘制简单的形状，因此禁用它不会遇到太多性能问题。

尝试在您的项目中进行以下设置:

fabric.Object.prototype.objectCaching = false;

并尝试是否有变化。

更多详细信息请参见:

Fabric Object Caching