Question

我正在尝试在我的Ionic 2应用程序中使用HTML5画布进行动画制作。为此，我必须使用window.requestAnimationFrame()为我的画布设置动画。这是我的代码：

import { Component, ViewChild, Renderer } from '@angular/core';
import { Platform } from 'ionic-angular';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

...

export class CubePage {
  @ViewChild('glCanvas') canvas: any;
  canvasElement: any;
  ctx: any;
  radius: number;
  leftBallX: number;
  leftBallY: number;
  rightBallX: number;
  rightBallY: number;

  constructor(public navCtrl: NavController, public navParams: NavParams, public renderer: Renderer, public platform: Platform) {
  }

  ngAfterViewInit() {
    console.log(this.canvas);
    this.radius = 25;
    this.canvasElement = this.canvas.nativeElement;

    this.renderer.setElementAttribute(this.canvasElement, 'width', this.platform.width() + "");
    this.renderer.setElementAttribute(this.canvasElement, 'height', this.platform.height() + "");
    this.ctx = this.canvasElement.getContext('2d');

    this.leftBallX = 5;
    this.leftBallY = 5;

    window.requestAnimationFrame(this.cycle);
  }


  cycle() {
    if (this.leftBallX < this.platform.width() / 2) {
      this.ctx.clearRect(0, 0, this.platform.width(), this.platform.height());
      this.drawCenterLine();
      this.updateLeftBall(this.leftBallX + 5, this.leftBallY);
      this.drawLeftBall();
    }
    window.requestAnimationFrame(this.cycle);
  }
...
    }

当我在Web浏览器中加载应用程序时，它会给出运行时错误Cannot read property 'leftBallX' of undefined。但是，当我删除window.requestAnimationFrame(this.cycle)行时，将第一行替换为this.cycle()，则没有错误。在Ionic / Angular中使用window是否有问题？

window.requestAnimationFrame（）在Ionic2应用程序中不起作用

0 个答案: