Question

每当我长时间使用object:moving时，我的画布变得非常慢，每当用户将对象居中到canva的中间时，我就会用它来显示引导线。

你可以通过自己在JSFiddle上看到一个形状移动10-20秒，你会发现在移动太多之后一切都变得缓慢，它变得非常难以使用：https://jsfiddle.net/ohu3zg57/1/

以下是我想改进的JS代码，所以这个问题不会发生：

// Horizontal Snap Line
var snapZone = 10;
canvas.on('object:moving', function(options) {
  var objectMiddle = options.target.left + options.target.getWidth() / 2;
  if (objectMiddle > canvas.width / 2 - snapZone && objectMiddle < canvas.width / 2 + snapZone) {
    options.target.set({
      left: canvas.width / 2 - options.target.getWidth() / 2
    }).setCoords();
   }
});

canvas.on('object:moving', function(options) {
  var objectMiddle = options.target.left + options.target.getWidth() / 2;
  if (objectMiddle > canvas.width / 2 - snapZone && objectMiddle < canvas.width / 2 + snapZone) {
    var line1 = new fabric.Line([
      canvas.width / 2, 0,
      canvas.width / 2, canvas.width
    ], {
      strokeDashArray: [6, 6],
      stroke: '#ccc',
      opacity: 1
    });
    line1.selectable = false;
    line1.evented = false;
    line1.hasControls = false;
    line1.hasBorders = false;
    canvas.add(line1);
  }

    if (objectMiddle == canvas.width / 2) {
    canvas.on('mouse:up', function(options) {
        line1.setOpacity('0');
        canvas.renderAll();
    });
    canvas.on('object:moving', function(options) {
        line1.setOpacity('0');
        canvas.renderAll();
    });
    }
});

正如您所看到的，我正在使用object:moving 2x和mouse:up 1x，渲染所有内容会使其工作变得非常缓慢和复杂，并且为每一行执行此操作会增加另一个复杂性。

避免像我一样搞乱性能的最佳方法是什么，并保持快速画布，此功能仍可正常运行？

FabricJS使用对象的性能问题：移动

0 个答案: