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开始，默认情况下不再如此。 使用小字体时，文本跨像素难以阅读，操作系统提示和抗锯齿有很大帮助。那些影响也画布。 这些平滑的字体有利于它们创建的特定位置。

在您创建组的情况下，将创建一个缓存副本。 将保存一个包含六边形和文本图片的小画布，之后只会移动它。

当您将组移动到不同位置时，为一个位置创建的自然别名可能看起来很糟糕。如果你没有用鼠标定位它（逐个像素地移动），但代码很可能是你得到2个像素，而第一次绘制的抗锯齿变得越来越模糊。

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

尝试在您的项目中设置：

fabric.Object.prototype.objectCaching = false;

并尝试更改内容。

此处有更多详情：

Fabric Object Caching