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

我是FabricJS和Typescript的新手，尝试在Typescript/Angular 4中的Fabric JS画布对象上实现类似对象捕捉的行为。我正在这里提供的javascript解决方案上对代码进行建模：

我运行到错误的行：

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)

错误类型错误：无法读取未定义的属性“getObjects”
在克拉斯。（导航.部件.ts:72）
klass.fire（fabric.js:239）
克拉斯火灾现场（fabric.js:10974）
在klass进行性能转换（fabric.js:10963）
在klass._transformObject（fabric.js:10927）
在klass.uu onMouseMove（fabric.js:10900）
在klass._onMouseMove（fabric.js:10520）
在ZoneDelegate.invokeTask（zone.js:367）
位于Object.onInvokeTask（core.es5.js:3881）
在ZoneDelegate.invokeTask（zone.js:366）
位于Zone.runTask（Zone.js:166）
位于HTMLDocument.ZoneTask.invoke（zone.js:420）

不确定在fabrics/@types画布上遍历所有对象的最佳方式是使用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;
        }
      });
    });

  }

ngOnInit（）{
//this.red=new fabric.Rect（{top:100，left:0，width:80，height:50，fill:'red'}）；
//this.blue=newfabric.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=newfabric.canvas（'canvas'，{selection:true}）；
fabric.Object.prototype.transparentCorners=false；
this.canvas.on（'object:moving'，function（e）{
this.obj=e.target；
this.obj.setCoords（）；//根据当前角度、宽度和高度设置拐角位置坐标
this.canvas.getObjects（）.forEach（函数（targ）{
this.activeObject=this.canvas.getActiveObject（）；
如果（target==this.activeObject）{return；}
if（Math.abs（this.activeObject.oCoords.tr.x-target.oCoords.tl.x）

使用

函数（）{}

语法时，上下文（

此

）会丢失。使用将保留您的上下文的：

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

     // ....
})

---

谢谢你的帮助。通过您的更改，我仍然得到：错误类型错误：无法读取未定义的属性“canvas”我是否缺少其他内容？您必须更改所有出现的情况。这行中还有另一个

this.canvas.getObjects（）.forEach（函数（target）{

明白了！谢谢！