Question

我正在使用Fabric.JS在我的Angular 2应用程序中的Canvas中拖动元素。当我在手机上打开我的应用程序时，拖动项目时存在相当大的延迟。前几秒没有滞后，但是我拖动物品的时间越长越糟糕。

我决定使用没有Angular 2的Fabric.JS进行测试，发现没有使用Angular 2时没有滞后。

在下面的代码示例中，我向Canvas添加了三个方形对象。仅使用这三个对象几乎不会出现延迟，但如果我添加了许多更复杂的对象，它就会变得非常糟糕。

我的滞后Angular 2成分：

import {Component, OnInit, ViewChild, ElementRef} from '@angular/core';
import 'fabric';
declare let fabric;

@Component({
  selector: 'app-fabric-canvas',
  template: `
    <canvas #canvas width="800" height="800"></canvas>
  `
})
export class FabricCanvasComponent implements OnInit {

  @ViewChild('canvas') canvasRef:ElementRef;
  private canvas: any;
  private square1;
  private square2;
  private square3;

  ngOnInit() {
    this.canvas = new fabric.Canvas(this.canvasRef.nativeElement, { });

    this.square1 = new fabric.Rect({
      width: 50,
      height:50,
      left: 0,
      top: 0,
      fill:'red'
    });

    this.square2 = new fabric.Rect({
      width: 50,
      height:50,
      left: 0,
      top: 0,
      fill:'blue'
    });

    this.square3 = new fabric.Rect({
      width: 50,
      height:50,
      left: 0,
      top: 0,
      fill:'green'
    });

    this.canvas.add(this.square1);
    this.canvas.add(this.square2);
    this.canvas.add(this.square3);
  }
}

我的测试没有使用Angular 2而不是滞后：

<canvas id="canvas" width="800" height="800"></canvas>

<script>
    var canvas = new fabric.Canvas('canvas');

    var square1 = new fabric.Rect({
        width: 50,
        height:50,
        left: 0,
        top: 0,
        fill:'red'
    });

    var square2 = new fabric.Rect({
        width: 50,
        height:50,
        left: 0,
        top: 0,
        fill:'blue'
    });

    var square3 = new fabric.Rect({
        width: 50,
        height:50,
        left: 0,
        top: 0,
        fill:'green'
    });

    canvas.add(square1);
    canvas.add(square2);
    canvas.add(square3);

</script>

问题是：为什么我只在使用带有Angular 2的Fabric.JS时遇到这种延迟？我在Angular 2组件中导入或使用Fabric.JS的方式有问题吗？

Answer 1

我有完全相同的问题（只有触摸）。我做了一个新的Angular 2项目，添加了Fabric并且拖动每次触摸都变慢了。

我花了几个小时寻找解决方案。 Angular ChangeDetectionStrategies没有帮助，NgZone也没有。最后我发现修复了从Fabric源代码中删除两行的问题。我在这里向他们的GitHub提交了一个问题：https://github.com/kangax/fabric.js/issues/3776

删除以下两行为我修复了滞后：
- addListener(this.upperCanvasEl, 'touchmove', this._onMouseMove, { passive: false });来自_onMouseUp() - 函数
- addListener(fabric.document, 'touchmove', this._onMouseMove, { passive: false }); - 来自_onMouseDown() - 函数。

我不确定删除这些是否可行，但您可以将其用作解决方案，而Fabric背后的人员正在进行合法修复。

Answer 2

问题来自于Zone.js不支持EventListenerOptions（被动等）。支持在v.8.8.7中添加：https://github.com/angular/zone.js/blob/master/CHANGELOG.md#087-2017-04-21

使用Fabric.JS和Angular 2时的性能问题

2 个答案: