Question

我正在使用Html5 Canvas创建离子2和角度2的财富之轮它的动画很好但我想当我点击一个按钮然后它应该开始动画。但是，当我在按钮上调用功能时，它正在显示

TypeError：self.context.anim不是函数

这是我的 home.ts 页面

import { Component, ViewChild } from '@angular/core';

import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
    @ViewChild('layout') canvasRef;
    ngAfterViewInit() {
        let canvas = this.canvasRef.nativeElement;
        let context = canvas.getContext('2d');
        canvas.width = 300;
        canvas.height = 300;
        function rand(min, max) {
            return Math.random() * (max - min) + min;
        }
        var color = ['#fbc', '#f88', '#fbc', '#f88', '#fbc', '#f88', "#fbc", "#f67"];
        var label = ['10', '200', '50', '100', '5', '500', '0', "jPOT"];
        var slices = color.length;
        var sliceDeg = 360 / slices;
        var deg = rand(0, 360);
        var speed = 0;
        var slowDownRand = 0;
        var ctx = context;
        var width = canvas.width; // size
        var center = width / 2;      // center
        var isStopped = false;
        var lock = false;

        function deg2rad(deg) {
            return deg * Math.PI / 180;
        }

        function drawSlice(deg, color) {
            ctx.beginPath();
            ctx.fillStyle = color;
            ctx.moveTo(center, center);
            ctx.arc(center, center, width / 2, deg2rad(deg), deg2rad(deg + sliceDeg));
            ctx.lineTo(center, center);
            ctx.fill();
        }

        function drawText(deg, text) {
            ctx.save();
            ctx.translate(center, center);
            ctx.rotate(deg2rad(deg));
            ctx.textAlign = "right";
            ctx.fillStyle = "#fff";
            ctx.font = 'bold 30px sans-serif';
            ctx.fillText(text, 130, 10);
            ctx.restore();
        }

        function drawImg() {
            ctx.clearRect(0, 0, width, width);
            for (var i = 0; i < slices; i++) {
                drawSlice(deg, color[i]);
                drawText(deg + sliceDeg / 2, label[i]);
                deg += sliceDeg;
            }
        }



        //document.getElementById("spin").addEventListener("mousedown", function () {
        //    isStopped = true;
        //}, false);

        drawImg();
        function anim () {
                deg += speed;
                deg %= 360;
                // Increment speed
                if (!isStopped && speed < 3) {
                    speed = speed + 1 * 8;
                }
                // Decrement Speed
                if (isStopped) {
                    if (!lock) {
                        lock = true;
                        slowDownRand = rand(0.994, 0.998);
                    }
                    speed = speed > 0.2 ? speed *= slowDownRand : 0;
                }
                // Stopped!
                if (lock && !speed) {
                    var ai = Math.floor(((360 - deg - 90) % 360) / sliceDeg); // deg 2 Array Index
                    ai = (slices + ai) % slices; // Fix negative index
                    return alert("You got:\n" + label[ai]); // Get Array Item from end Degree
                }

                drawImg();
                window.requestAnimationFrame(anim);
            } ;
            //anim();

    }

  constructor(public navCtrl: NavController) {    
  }

  onLink(url: string) {
      window.open(url);
  }
}

这是我的 home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>    
<ion-content class="home" padding>
    <canvas #layout></canvas>
    <button (click)="anim(animation)">
        Button Item
    </button>   
</ion-content>

请帮帮我。提前谢谢。

Answer 1

为不在anim内的班级设置ngAfterViewInit()函数。

像这样：

export class HomePage {
    @ViewChild('layout') canvasRef;
    ngAfterViewInit() {
     //...
    }
//define as class function
function anim () {
                deg += speed;
                deg %= 360;
                // Increment speed
                if (!isStopped && speed < 3) {
                    speed = speed + 1 * 8;
                }
                // Decrement Speed
                if (isStopped) {
                    if (!lock) {
                        lock = true;
                        slowDownRand = rand(0.994, 0.998);
                    }
                    speed = speed > 0.2 ? speed *= slowDownRand : 0;
                }
                // Stopped!
                if (lock && !speed) {
                    var ai = Math.floor(((360 - deg - 90) % 360) / sliceDeg); // deg 2 Array Index
                    ai = (slices + ai) % slices; // Fix negative index
                    return alert("You got:\n" + label[ai]); // Get Array Item from end Degree
                }

                drawImg();
                window.requestAnimationFrame(this.anim.bind(this));
            } 
 }//end of class

如何解决self.context.anim不是离子2中的函数错误？

1 个答案: