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();

JSFiddle可见here。请任何人告诉我可能是什么问题。

提前致谢。

Answer 1

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

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

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

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

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

尝试在您的项目中这样设置：

fabric.Object.prototype.objectCaching = false;

并尝试是否有变化。

此处有更多详细信息：

Fabric Object Caching

Fabric JS IText字体根据位置模糊

Fabric JS IText font fuzzy according to position

html

javascript

canvas

html5-canvas

fabricjs

Javascript代码