如何在 Angular 中实现 Fabricjs Align 指南？答案

【问题标题】：How to implement Fabricjs Align guidelines in Angular?如何在 Angular 中实现 Fabricjs Align 指南？
【发布时间】：2021-06-01 21:44:38
【问题描述】：

我们正在尝试按照链接实施 FabricJs 指南（对齐、对齐）：https://github.com/fabricjs/fabric.js/blob/master/lib/aligning_guidelines.js

这些是我们遵循的步骤（根据链接：How to call JavaScript functions from Typescript in Angular 5?）：

第1步：将这些js复制到assets/文件夹中作为guidelines.services.js

第 2 步：在 .ts 文件中声明这些函数

问题：仍然面临问题 - 加载形状延迟。

请帮助我们完成相关的演示/实施/文档。

【问题讨论】：

标签： angular fabricjs

【解决方案1】：

上面提到的步骤都是对的，只是需要在ngAfterContentInit()初始化。代码会是这样的。

//#region Methods which are defined in the .js files.

declare function initCenteringGuidelines(canvas: fabric.Canvas):void;
declare function initAligningGuidelines(canvas: fabric.Canvas):void;
declare function initKeyBoardMovement (canvas: fabric.Canvas,e:any):void;

//#endregion

@Component({
  selector: 'app-fabric-canvas',
  templateUrl: './fabric-canvas.component.html',
  styleUrls: ['./fabric-canvas.component.scss'],
})


ngAfterContentInit() {
    this.ngZone.runOutsideAngular(() => {
      if (this.eventHandler.canvas) {
        this.eventHandler.canvas.dispose();
      }
      this.canvas = new fabric.Canvas('canvas', {
        selection: true,
        preserveObjectStacking: true,
        backgroundColor:'#2d2d2d', //need to add to Theme,
        fireRightClick: true,  // <-- enable firing of right click events
        fireMiddleClick: true, // <-- enable firing of middle click events
        stopContextMenu: true, // <--  prevent context menu from showing
      });

    
      initCenteringGuidelines(this.canvas);
      initAligningGuidelines(this.canvas);   
    });
  }

【讨论】：