如何在fabric js中做一个补丁，将所有浮点值转换为四舍五入值？

Question

我正在做一个项目，其中我使用了 fabricJS-3.6.3。它是一个最好的画布操作库。

我们知道画布的局限性，画布只渲染半像素的图像。所以有时候会很模糊。和我在你面前提出的问题一样。

我试图用下面的代码将文本渲染到画布中去。

var text = new fabric.Textbox("lorem ipsum pixel", {
    top: 13.5
    left: 12.13
    width: 157.68
    fontSize: 15
    fontFamily: 'opensans-lightItalic'
    scaleX: 0.67
    scaleY: 0.67
})
canvas.add(text);

我试着用这段代码使它变圆。

var text = new fabric.Textbox("lorem ipsum pixel", {
        top: 13.5
        left: 12.13
        width: 157.68
        fontSize: 15
        fontFamily: 'opensans-lightItalic'
        scaleX: 0.67
        scaleY: 0.67
    })
text.set({
   height: Math.round(text.height),
   width: Math.round(text.width)
})

canvas.add(text);
canvas.loadFromJSON(canvas.toJSON(), canvas.renderAll.bind(canvas));

现在这段代码的结果总是模糊不清，因为画布渲染了 Half a Pixel 而我们得到的图像是模糊的。

所以，为了获得清晰的结果，我必须将它设置为与 Rounded value. 现在的实际问题是，项目太大，结构复杂，所以我想做一个。fabricJs patch 自动替换（上、左、比例ETC......）属性为四舍五入值。我曾尝试用 fabric.Object 方法覆盖，但不能成功。

如果有人知道如何访问和设置所有对象的属性，那么请帮助我。

Answer 1

取而代之的是 Textbox 你应该使用 IText

var text = new fabric.IText('lorem ipsum pixel', {
    top: 13.5,
    left: 12.13,
    fontSize: 15,
    fontFamily: 'opensans-lightItalic'
});
canvas.add(text);