Fabricjs 对象在材料步进器中完成动画后消失

Question

我在材质步进器的一步中添加了 fabricjs 画布。只有在为这一步的入口设置动画时，它才能很好地呈现。 但是当动画完成时，所有对象突然消失，画布看起来是空的。

我试图延迟呈现画布或延迟加载材质步进器的步骤。但它没有帮助。

当我将动画持续时间增加到10秒时，我可以清楚地看到它与动画的完成有关。 当我完全禁用动画时，画布也是空的。

代码如下： 有父组件：

<mat-horizontal-stepper [linear]="true" #stepper animationDuration="10000" (animationDone)="stepperDone()">
<mat-step>
       <app-dotmap [processKey]="'process0'" ></app-dotmap>
</mat-step>
</mat-horizontal-stepper>

和子组件n app-dotmap：

<canvas id="{{processKey}}" style="border: 1px solid black;"></canvas>

及其打字稿：

canvas: any
Input()processKey = ""
  initiateCanvas() {
    this.canvas = new fabric.Canvas(this.processKey, {
      selection: false,
      centeredScaling:true,
      controlsAboveOverlay: true,
      targetFindTolerance: 4
    });
    let dot = new fabric.Circle()
    dot.left = left
    dot.top = top
    dot.radius = 20
    dot.fill = "blue"
    this.canvas.add(dot)
}

动画完成后，画布上的蓝点消失。