如何在 Angular 中实施 Fabricjs 对齐准则？

Question

我们正在尝试根据 link 实施 FabricJs 指南-（对齐、捕捉）：https://github.com/fabricjs/fabric.js/blob/master/lib/aligning_guidelines.js

这些是我们遵循的步骤（根据 link : ）：

第 1 步：将这些 js 复制到 assets/folder 作为 guidelines.services.js

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

问题：仍然面临问题 - 实施它时加载形状延迟。

请帮助我们提供相关的Demo/实现/文档。

Answer 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);   
    });
  }

如何在 Angular 中实施 Fabricjs 对齐准则？

How to implement Fabricjs Align guidelines in Angular?

fabricjs

angular