html5-canvas - 如何在 FabricJS 中优化与大 svg 图像的显示和交互而没有延迟

Question

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

• big_image_1.svg: 4.4MB
  
• big_image_2.svg: 6.1MB
  
• big_image_3.svg: 4.1MB
  
• big_image_4.svg: 13.6MB
  

这是我的代码：

var canvas;

var canvasObject = document.getElementById("editorCanvas");

// set canvas equal size with div
$(canvasObject).width($("#canvasContainer").width());
$(canvasObject).height($("#canvasContainer").height());

canvas = new fabric.Canvas('editorCanvas', {
  backgroundColor: 'white',
  selectionLineWidth: 2,
  width: $("#canvasContainer").width(),
  height: $("#canvasContainer").height()
});

for (var i = 0; i < 4; i++) {

  var bigImage = new fabric.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', function(imageObject) {
    imageObject.set('dirty', true);
    canvas.renderAll();
    setObjectCoords();
  });

}

function setObjectCoords() {
  canvas.forEachObject(function(object) {
    object.setCoords();
  });
}

#canvasContainer {
  width: 100%;
  height: 100vh;
  background-color: gray;
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>

<div id="canvasContainer">
  <canvas id="editorCanvas"></canvas>
</div>

拖动项目正在填充沉重和滞后

Answer 1

needsItsOwnCache你可以从fabric.Image课堂上重写。

var canvasObject = document.getElementById("editorCanvas");

// set canvas equal size with div
$(canvasObject).width($("#canvasContainer").width());
$(canvasObject).height($("#canvasContainer").height());

canvas = new fabric.Canvas('editorCanvas', {
  backgroundColor: 'white',
  selectionLineWidth: 2,
  width: $("#canvasContainer").width(),
  height: $("#canvasContainer").height()
});

for (var i = 0; i < 4; i++) {

  var bigImage = new fabric.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', function(imageObject) {
    //imageObject.set('dirty', true);
    canvas.renderAll();
    setObjectCoords();
  });

}

function setObjectCoords() {
  canvas.forEachObject(function(object) {
    object.setCoords();
  });
}

fabric.Image.prototype.needsItsOwnCache = function() {
  return true
}

#canvasContainer {
  width: 100%;
  height: 100vh;
  background-color: gray;
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>

<div id="canvasContainer">
  <canvas id="editorCanvas"></canvas>
</div>