迭代在Typescript中的Fabric JS中的画布上的所有对象（@types）

Question

我是FabricJS和Typescript的新手，试图在Typescript/Angular 4中的Fabric JS画布对象上实现像对象一样的对齐。建模设计我对JavaScript的解决方案代码这里提供：

https://stackoverflow.com/a/22649022/3207478

我正在与行错误：

this.canvas.getObjects().forEach(function (targ) { ... 

我从浏览器中得到每当移动的对象是错误：

ERROR TypeError: Cannot read property 'getObjects' of undefined 
at klass.<anonymous> (navigation.component.ts:72) 
at klass.fire (fabric.js:239) 
at klass._fire (fabric.js:10974) 
at klass._performTransformAction (fabric.js:10963) 
at klass._transformObject (fabric.js:10927) 
at klass.__onMouseMove (fabric.js:10900) 
at klass._onMouseMove (fabric.js:10520) 
at ZoneDelegate.invokeTask (zone.js:367) 
at Object.onInvokeTask (core.es5.js:3881) 
at ZoneDelegate.invokeTask (zone.js:366) 
at Zone.runTask (zone.js:166) 
at HTMLDocument.ZoneTask.invoke (zone.js:420) 

不确定走过织物/ @类型画布上所有对象的最佳方式是在Typescript中。 WebStorm IDE建议将getObjects作为最有用的方法，但也许还有一些我没有看到的东西。想法和建议非常感谢！

ngOnInit() { 
    // this.red = new fabric.Rect({top: 100, left: 0, width: 80, height: 50, fill: 'red'}); 
    // this.blue = new fabric.Rect({top: 100, left: 0, width: 80, height: 50, fill: 'blue'}); 
    // this.green = new fabric.Rect({top: 100, left: 0, width: 80, height: 50, fill: 'green'}); 

    this.canvas = new fabric.Canvas('canvas', { selection: true }); 
    fabric.Object.prototype.transparentCorners = false; 

    this.canvas.on('object:moving', function (e) { 
     this.obj = e.target; 
     this.obj.setCoords(); // Sets corner position coordinates based on current angle, width and height 
     this.canvas.getObjects().forEach(function (targ) { 
     this.activeObject = this.canvas.getActiveObject(); 

     if (targ === this.activeObject) { return; } 

     if (Math.abs(this.activeObject.oCoords.tr.x - targ.oCoords.tl.x) < this.edgedetection) { 
      this.activeObject.left = targ.left - this.activeObject.getWidth(); 
     } 
     if (Math.abs(this.activeObject.oCoords.tl.x - targ.oCoords.tr.x) < this.edgedetection) { 
      this.activeObject.left = targ.left + targ.getWidth(); 
     } 
     if (Math.abs(this.activeObject.oCoords.br.y - targ.oCoords.tr.y) < this.edgedetection) { 
      this.activeObject.top = targ.top - this.activeObject.getHeight(); 
     } 
     if (Math.abs(targ.oCoords.br.y - this.activeObject.oCoords.tr.y) < this.edgedetection) { 
      this.activeObject.top = targ.top + targ.getHeight(); 
     } 
     if (this.activeObject.intersectsWithObject(targ) && targ.intersectsWithObject(this.activeObject)) { 
      targ.strokeWidth = 10; 
      targ.stroke = 'red'; 
     } else { 
      targ.strokeWidth = 0; 
      targ.stroke = false; 
     } 
     if (!this.activeObject.intersectsWithObject(targ)) { 
      this.activeObject.strokeWidth = 0; 
      this.activeObject.stroke = false; 
     } 
     }); 
    }); 

    } 

Answer 1

当您使用function() {}语法您的上下文（this）丢失。使用arrow functions这将保留您的上下文：

this.canvas.on('object:moving', (e) => { 

    // .... 
})