【问题标题】：Fabric JS IText font fuzzy according to positionFabric JS IText字体根据位置模糊
【发布时间】：2017-02-10 19:44:42
【问题描述】：

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

从图中可以看出，左边的文字字体模糊，右边的字体清晰。也就是说，文本在某些地方变得模糊，而在其他地方则清晰。

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。请任何人告诉我可能是什么问题。

提前致谢。

【问题讨论】：

很难说，只要我不知道你在为第一个对象做什么。这可能是问题，因为您使用的是不同的不透明度。能否包含 2 个组对象的完整代码？
@Observer，它们是相同的，没有不同。物体在移动时在左侧变得模糊，在右侧变得清晰。
检查这个小提琴：jsfiddle.net/w19kascL我正在使用你的代码并且工作正常。您使用的是什么库版本？

标签： javascript html canvas html5-canvas fabricjs

【解决方案1】：

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

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

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

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

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

尝试在您的项目中设置：

fabric.Object.prototype.objectCaching = false;

如果有变化，请尝试。

更多细节在这里：

Fabric Object Caching

【讨论】：

有道理，谢谢。