Html5 canvas 如何优化显示和显示；与FabricJS中无延迟的大型svg图像交互

我有一个带有一些大型svg文件的fabricJS编辑器，因此，当我在编辑器上与（移动/拖动）项目交互时，我会将其填充得非常滞后和沉重。
如何使用fabricJS优化大型svg文件？

• big\u image\u 1.svg:4.4MB

  
  

• big\u image\u 2.svg:6.1MB

  
  

• big\u image\u 3.svg:4.1MB

  
  

• big\u image\u 4.svg:13.6MB

  
  

这是我的密码：

var画布；
var canvasObject=document.getElementById（“editorCanvas”）；
//将画布设置为与div相等的大小
$（canvasObject）.width（$（“#canvasContainer”）.width（）；
$（canvasObject）.height（$（“#canvasContainer”）.height（）；
canvas=newfabric.canvas（'editorCanvas'{
背景颜色：“白色”，
选择线宽：2，
宽度：$（“#画布容器”）.width（），
高度：$（“#画布容器”）。高度（）
});
对于（变量i=0；i<4；i++）{
var bigImage=newfabric.Image（）；
bigImage.left=10*（i+1）；
bigImage.top=10*（i+1）；
bigImage[“objectCaching”]=true；
canvas.add（bigImage）；
bigImage.setSrc（'https://futushigame.firebaseapp.com/big_image/big_image_'+（i+1）+'.svg'，函数（imageObject）{
设置（'dirty'，true）；
canvas.renderAll（）；
setObjectCoords（）；
});
}
函数setObjectCoords（）{
canvas.forEachObject（函数（对象）{
setCoords（）；
});
}

#画布容器{
宽度：100%；
高度：100vh；
背景颜色：灰色；
}

---

您可以从

fabric.Image

类重写

needsItsOwnCache

var canvasObject=document.getElementById（“editorCanvas”）； //将画布设置为与div相等的大小 $（canvasObject）.width（$（“#canvasContainer”）.width（）； $（canvasObject）.height（$（“#canvasContainer”）.height（）； canvas=newfabric.canvas（'editorCanvas'{ 背景颜色：“白色”， 选择线宽：2， 宽度：$（“#画布容器”）.width（）， 高度：$（“#画布容器”）。高度（） }); 对于（变量i=0；i<4；i++）{ var bigImage=newfabric.Image（）； bigImage.left=10*（i+1）； bigImage.top=10*（i+1）； //bigImage[“objectCaching”]=true； bigImage[“ownCaching”]=true； //bigImage[“clipPath”]=[]； canvas.add（bigImage）； bigImage.setSrc（'https://futushigame.firebaseapp.com/big_image/big_image_'+（i+1）+'.svg'，函数（imageObject）{ //设置（'dirty'，true）； canvas.renderAll（）； setObjectCoords（）； }); } 函数setObjectCoords（）{ canvas.forEachObject（函数（对象）{ setCoords（）； }); } fabric.Image.prototype.needsItsOwnCache=函数（）{ 返回真值 }

#画布容器{
宽度：100%；
高度：100vh；
背景颜色：灰色；
}

---

谢谢马吕斯·图尔库和杜尔加。这真是一个魔术！在Fabric editor中将此解决方案用于所有图像对象时是否存在任何缺点？顺便问一下，我们可以在FabricJS中设置文本或IText的边界框（例如：我想制作一个大小为200 x 200的可编辑文本，并将文本中心垂直和水平对齐）。