Javascript FabricJS：大网格对象是模糊的

我想用fabricjs绘制一个大网格，但它太模糊了。我使用fabricJS

canvas.toSVG（）

导出到svg文件，并在浏览器中打开svg文件，视图良好。所以我认为这很可能是edge的一个bug

测试代码为：

var数据=[]；
0.0120，-0.0，-0.0，-0.0，-0.0，-0.012，-0.012，-0.0，-0.0120，-0.0，-0.0，-0.0120，-0.0，-0.0，-0.0，-0.0，-0.0，-0.0 0，-0.0 0 0 0.0，-0.012，--0.012，--0.049，-0.049，-0.049，--0.0.0 0 0 0.0 0 0-0 0 0.012，-0-0-0.0 0 0 0 0.01，--0.01，-0-0.0 0 0 0 0 0 0 0 0 0.012，-0.0 0 0 0 0 0 0 0 0 0 0 0-0-0.012，-0-0.0 0 0 0.0 0 0 0 0 0 0 0 0-0-0.012，-0-0 0.0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.122,0.098,0.146,0.183,0.171,0.207,0.232]；
对于（变量i=0；i<200；i++）{
data=data.concat（温度）；
}
//案例1：模糊
var canvas1=新织物画布（“ecg1”）；
var宽度=8000；
var高度=400；
画布1.设置宽度（宽度）；
画布1.设置高度（高度）；
var bg1=getBackgroundPath（宽度、高度）；
var ecg1=getEcgPath（数据）；
canvas1.add（bg1）；
canvas1.add（ecg1）；
canvas1.renderAll（）；//模糊的
//案例2：好的
var canvas2=新的fabric.Canvas（“ecg2”）；
var data2=data.slice（0,3000）；
宽度=1000；
高度=400；
画布2.设置宽度（宽度）；
画布2.设置高度（高度）；
var bg2=getBackgroundPath（宽度、高度）；
var ecg2=getEcgPath（data2）；
canvas2.add（bg2）；
canvas2.add（ecg2）；
canvas2.renderAll（）；
//案例3：模糊
var canvas3=新织物画布（“ecg3”）；
画布3.设置宽度（宽度）；
画布3.设置高度（高度）；
canvas3.add（newfabric.Group（[bg2，ecg2]）；
canvas3.renderAll（）；
函数getBackgroundPath（宽度、高度）{
var网格=[]；
对于（变量y=0；y请在此处进一步阅读：

对于ECG线路，这个问题实际上很容易解决。
如果您的应用程序只需要绘制一条大路径或一整条路径，则不需要缓存

缓存是如何工作的？
缓存在单独的画布上绘制对象，然后在移动对象时在每一帧重复使用该画布。
对于许多对象，这比必须在每一帧执行多个填充和笔划操作更有效，尤其是在对象比较复杂的情况下

为避免性能陷阱，默认情况下，用于缓存的画布限制为200万像素（您可以将其向上推，更改fabric.perflimitesizetotal），并且无论是什么百万像素大小，默认情况下最大大小限制为4096（如果您不需要支持ie11，则可以在更改fabric.maxCacheSideLimit时使其更大）

在您的情况下，路径由cpu平滑处理

对于网格，我们需要更多的代码


var数据=[]；
0.0120，-0.0，-0.0，-0.0，-0.0，-0.012，-0.012，-0.0，-0.0120，-0.0，-0.0，-0.0120，-0.0，-0.0，-0.0，-0.0，-0.0，-0.0 0，-0.0 0 0 0.0，-0.012，--0.012，--0.049，-0.049，-0.049，--0.0.0 0 0 0.0 0 0-0 0 0.012，-0-0-0.0 0 0 0 0.01，--0.01，-0-0.0 0 0 0 0 0 0 0 0 0.012，-0.0 0 0 0 0 0 0 0 0 0 0 0-0-0.012，-0-0.0 0 0 0.0 0 0 0 0 0 0 0 0-0-0.012，-0-0 0.0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.122,0.098,0.146,0.183,0.171,0.207,0.232]；
对于（变量i=0；i<200；i++）{
data=data.concat（温度）；
}
//案例1：模糊
var canvas1=新织物画布（“ecg1”）；
var宽度=8000；
var高度=400；
画布1.设置宽度（宽度）；
画布1.设置高度（高度）；
var bg1=getBackgroundPath（宽度、高度）；
var ecg1=getEcgPath（数据）；
canvas1.add（bg1）；
canvas1.add（ecg1）；
canvas1.renderAll（）；//模糊
函数getBackgroundPath（宽度、高度）{
var网格=[]；
对于（变量y=0；y@AndreaBogazzi

谢谢你的回答。在我使用
fabric.Object.prototype.objectCaching=false
之后，它显示的很好

在我的应用程序中，绘制网格代码如下所示


var数据=[]；
0.0120，-0.0，-0.0，-0.0，-0.0，-0.012，-0.012，-0.0，-0.0120，-0.0，-0.0，-0.0120，-0.0，-0.0，-0.0，-0.0，-0.0，-0.0 0，-0.0 0 0 0.0，-0.012，--0.012，--0.049，-0.049，-0.049，--0.0.0 0 0 0.0 0 0-0 0 0.012，-0-0-0.0 0 0 0 0.01，--0.01，-0-0.0 0 0 0 0 0 0 0 0 0.012，-0.0 0 0 0 0 0 0 0 0 0 0 0-0-0.012，-0-0.0 0 0 0.0 0 0 0 0 0 0 0 0-0-0.012，-0-0 0.0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.122,0.098,0.146,0.183,0.171,0.207,0.232]；
对于（变量i=0；i<200；i++）{
data=data.concat（温度）；
}
//案例1：模糊
var canvas1=新织物画布（“ecg1”）；
var宽度=8000；
var高度=400；
画布1.设置宽度（宽度）；
画布1.设置高度（高度）；
var bg11=getBackgroundDot（宽度、高度）；
var bg12=getBackgroundPath（宽度、高度）；
var ecg1=getEcgPath（数据）；
画布1.添加（bg11）；
画布1.添加（bg12）；
canvas1.add（ecg1）；
canvas1.renderAll（）；//模糊
函数getBackgroundDot（）{
var dotLineWidth=2；
var dot=[]；
点推力（“M0”）；
对于（var y=0；y当我禁用缓存时，它是视图ok。
fabric.Object.prototype.objectCaching=false
fabric.Object.prototype.objectCaching=false
它将禁用整个对象缓存，这不是一个好的解决方案。是的，但在我的应用程序中它是enouph。您可以将缓存添加到指定的对象。
new fabric.Path（grid.join（“”，{objectCaching:false}）；