在Angular应用中,针对Material Stepper的一个常见问题是,在使用Fabricjs创建动画时,动画加入后,鼠标点击后Fabric对象消失。这是因为材料步进器重新启用Angular Renderer,以渲染模板,并在此过程中删除步进器中所有的动画图像。为了解决这个问题,我们需要用一个设定来确保FabricJs对象在Angular Renderer重新启用后不会消失。
下面的代码示例演示了如何保留FabricJs对象:
import { Component, ViewChild, AfterViewInit, ElementRef, Renderer2 } from '@angular/core';
import * as fabric from 'fabric';
@Component({
selector: 'app-stepper',
templateUrl: './stepper.component.html',
styleUrls: ['./stepper.component.css']
})
export class StepperComponent implements AfterViewInit {
canvas: any;
@ViewChild('drawingArea') drawingArea: ElementRef;
constructor(private renderer: Renderer2) { }
ngAfterViewInit() {
this.canvas = new fabric.Canvas('canvas', {});
this.renderer.listen('window', 'mouseup', (event) => {
this.canvas.renderAll();
});
}
}
在上述示例中,我们使用了Angular的Renderer2服务,它与Web API renderer不同,因为它在许多平台上都可以正常工作,并且支持依赖注入和轻量级的DOM操作。我们通过这个示例的代码,确保FabricJs对象可以在渲染器相应的事件中保持不变。