制造命运之轮停在Angular 4的特定地点

Question

我正试图为角度4的Ionic 3应用程序制作幸运之轮4.Everthing工作正常，但它只是随机停止。 我面临的挑战是，我想根据我的数据在特定地点停止它，如果我得到我的物品一次。在使用所有物品之前不应该再来。

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

  @Component({
    selector: 'page-wheel',
    templateUrl: 'wheel.html',
  })
  export class WheelPage {
    @ViewChild('myCanvas') myCanvas: ElementRef;
    @ViewChild('spin') spin: ElementRef;
    public ctx: CanvasRenderingContext2D;
    color = ['#fbc', '#f88', '#fbc', '#f88', '#fbc', '#f88', "#fbc", "#f67"];
    label = ['Beer', 'Peg', 'Shot', 'Bottle', 'Food', 'Beer1', 'Bomb', "Fire"];
    slices = this.color.length;
    sliceDeg = 360 / this.slices;
    deg: any;
    public speed: any;
    slowDownRand: any = 0;
    isStopped:any = false;
    width: any;
    center: any;
    lock = false;
    constructor(public navCtrl: NavController, public navParams: NavParams) {
      this.speed = 0;
      this.deg = this.rand(0, 360);
      let canvas = document.createElement('canvas');
      this.width = canvas.width; // size
      this.center = this.width / 2;      // center


    }

    ngAfterViewInit(): void {
      this.ctx = (<HTMLCanvasElement>this.myCanvas.nativeElement).getContext('2d');
      this.anim();
    }

    rand(min, max) {
      return Math.random() * (max - min) + min;
    }
    deg2rad(deg) {
      return deg * Math.PI / 180;
    }
    drawSlice(deg, color) {
      this.ctx.beginPath();
      this.ctx.fillStyle = color;
      this.ctx.moveTo(this.center, this.center);
      this.ctx.arc(this.center, this.center, this.width / 2, this.deg2rad(deg), this.deg2rad(deg + this.sliceDeg));
      this.ctx.lineTo(this.center, this.center);
      this.ctx.fill();
    }

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

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

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

      this.drawImg();
      window.requestAnimationFrame(this.anim.bind(this));
    };

    onStopClick(){
        this.isStopped = true;
    }

  }

Html文件

  <ion-header>

    <ion-navbar>
      <ion-title text-center class="fontMont-Regular">Spin Wheel</ion-title>
    </ion-navbar>

  </ion-header>


  <ion-content no-padding class="setBackground">
    <ion-row style="margin-top:15%">
      <ion-col col-12 text-center>
        <div id="wheel">
          <canvas #myCanvas width="auto" height="300"></canvas>
        </div>
      </ion-col>
      <ion-col offset-1 col-10>
          <button #spin class="stopButton" (click)="onStopClick()">Stop!</button>
      </ion-col>
    </ion-row>
  </ion-content>