如何使用Ionics离子幻灯片在HTML5画布之间切换?

时间:2019-05-05 16:18:59

标签: angular html5 ionic-framework html5-canvas ionic4

我正在编写一个应用程序,该应用程序要根据当前幻灯片显示HTML5画布上绘制的不同形状。

因此,当应用程序加载时,我想初始化2张幻灯片,一张带有三角形,一张带有正方形,并能够使用Ionics离子幻灯片在它们之间滑动。

因此,在另一个组件中,我使用画布组件,如下所示,以创建三个选项卡:

 <ion-slides id='slides'>
    <ion-slide *ngFor='let index of [0,1]'>
      <customCanvas [index]='index'></customCanvas>
    </ion-slide>
  </ion-slides>

我的customCanvas.component.html仅包含一个画布,如:

<canvas id="canvas" width="300px" height="300px"></canvas>

customCanvas.component.ts将画布初始化为:

  ngOnInit() {
    this.canvas = <HTMLCanvasElement>document.getElementById('canvas');
    var context = this.canvas.getContext("2d");

    //use the context to draw either a triangle/square
  }

由于每个组件都有一个自己的画布,所以我期望我将以访问它们的方式获得两个不同的画布元素。 但是,似乎总是得到当前显示的画布,而第一个形状被第二个覆盖。 滑动到其他画布时,它只是空的默认画布。

任何有关如何访问“隐藏”画布的线索都将受到赞赏,并希望将滑块正确设置。

1 个答案:

答案 0 :(得分:1)

根据具有多个具有相同名称的id的浏览器标准是有效的,但是当您查询DOM时,它的工作方式将不同,它将始终返回ID的第一个匹配项。此处的问题是您正在使用canvas id来查询文档。在这里,您可以考虑将id更改为class选择器。

然后在查询DOM时,使用this.elementRef.nativeElement将其限制为特定组件。在进行任何类型的DOM操作之前,还请使用ngAfterViewInit生命周期来确保组件DOM存在。

constructor(private elementRef: ElementRef) {}

ngAfterViewInit() {
    // You could also use Renderer2 API for SSR and WebWorker support
    this.canvas = this.elementRef.nativeElement.getElementByClassName('canvas');
    var context = this.canvas.getContext("2d");

    //use the context to draw either a triangle/square
}