Fabric.JS를 각도 2로 사용할 때의 성능 문제

Question

Fabric.JS를 사용하여 Angular 2 어플리케이션의 캔버스에서 요소를 드래그합니다. 휴대 전화에서 응용 프로그램을 열면 항목을 드래그 할 때 상당한 지연이 있습니다. 처음 몇 초 동안 지체가 발생하지는 않지만 물건을 끌어 올리는 데 오래 걸리면 악화되고 악화됩니다.

나는 각도이없이 Fabric.JS를 사용하여 테스트를하기로 결정, 나는이 세 가지 사각형 개체를 추가하고 아래의 코드 샘플에서 각도 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); 
    } 
} 

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

질문은 : 왜 내가 경험하고있다 Fabric.JS를 Angular 2와 함께 사용하는 경우에만이 지연이 발생합니까? Fabric.JS를 Angular 2 구성 요소에서 가져 오거나 사용하는 방식에 문제가 있습니까?

Answer 1

나는 (터치만으로) 정확히 같은 문제가있었습니다. 나는 새롭게 새로운 Angular 2 프로젝트를 만들었고, Fabric을 추가하고 각 터치로 드래그하는 속도가 느려졌습니다.

나는 해결책을 찾기 위해 수 시간을 보냈다. Angular ChangeDetectionStrategies도 도움이되지 않았고 NgZone도 도움이되지 않았습니다. 결국 Fabric 소스 코드에서 두 줄을 지우는 문제를 발견했습니다. 여기 자신의 GitHub의에 문제를 제출 : 다음 두 줄을 제거 https://github.com/kangax/fabric.js/issues/3776는

나를 위해 지연을 고정 :
- _onMouseUp() α- 함수
에서 addListener(this.upperCanvasEl, 'touchmove', this._onMouseMove, { passive: false });
-addListener(fabric.document, 'touchmove', this._onMouseMove, { passive: false });
을 _onMouseDown() α- 함수에서.

제거 방법은 확실하지 않지만 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