【发布时间】：2017-07-24 11:30:48
【问题描述】：
我正在使用 Fabric.JS 在 Angular 2 应用程序的画布中拖动元素。当我在手机上打开我的应用程序时，拖动项目时会有相当大的延迟。最初几秒钟没有延迟，但我拖的时间越长，延迟越严重。
我决定在没有 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 的方式有问题吗？
【问题讨论】：
-
我可能不是 angular2 专家，但据我所知，angular 不是运行密集 fps 依赖应用程序的地方，有一个我尚未探索过的解决方案，称为在外部运行代码角的区域。类似this
-
感谢您的提示，这可能正是我所需要的。我会试试看。
-
嗨。我已经使用 Fabric.js 在 Angular 2 中实现了座位预订应用程序，即使有 1000 个座位（矩形）也没有问题。这是我的Hello World Angular 2 + Fabric.js 项目。在这个项目中，我刚刚做了一个包含 1000 个项目的测试，我的移动设备上没有发现任何问题。
-
您是否允许用户交互？比如，移动、缩放、更新对象？如果没有，这可能就是您没有遇到任何问题的原因。
标签： performance angular canvas fabricjs