角度2のFabric.JSを使用したときのパフォーマンス上の問題

Question

Fabric.JSを使用してAngular 2アプリケーションのキャンバスに要素をドラッグしています。アプリケーションを電話で開くと、アイテムをドラッグするときにかなりの時間がかかります。遅れは最初の数秒間そこにはないが、それは悪化し、アイテムをドラッグしている時間が長くなるにつれて悪化する。

私は角2なしFabric.JSを使用してテストを行うことを決めた、と私は3つの平方オブジェクトを追加してい以下のコードサンプルでは角度2

を使用していないときに何のタイムラグが存在しないことが判明キャンバス。これらの3つのオブジェクトだけではラグはほとんど目に見えませんが、多くの複雑なオブジェクトを追加すると本当に悪くなります。

マイ遅れ角度2の成分：角度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); 
    } 
} 

私のテスト：

<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> 

質問です：なぜ私が経験していますこの遅れはFabric.JSを角2で使用している場合のみですか？ Angular 2コンポーネントでFabric.JSをインポートまたは使用する方法に問題がありますか？

Answer 1

私はまったく同じ問題を抱えていました（タッチの場合のみ）。新しく新しく作成したAngular 2プロジェクトを作成し、Fabricを追加し、ドラッグする度にドラッグごとに遅くなりました。

解決策を探して何時間も費やしました。 Angular ChangeDetectionStrategiesは役に立ちませんでした。また、NgZoneも役に立ちませんでした。最終的に、Fabricソースコードから2行を削除するという修正が見つかりました。私はここで自分のGitHub上の問題を提出し、次の2行を削除https://github.com/kangax/fabric.js/issues/3776は

私のためのラグを固定：
- _onMouseUp() -function
からaddListener(this.upperCanvasEl, 'touchmove', this._onMouseMove, { passive: false });
からaddListener(fabric.document, 'touchmove', this._onMouseMove, { passive: false });
を_onMouseDown() -functionから。

これを削除する方法はわかりませんが、Fabricの背後にいる人が正当な修正を行っている間に解決策として使用できます。

Answer 2

Zone.jsがEventListenerOptions（passiveなど）をサポートしていなかったことが原因です。 v。0.8.7で追加されたサポート：https://github.com/angular/zone.js/blob/master/CHANGELOG.md#087-2017-04-21