javascript - winwheel angular callbackSound & callbackFinished 无法正常工作

Question

我正在尝试使用 angular 9 的 winwheel js

我的代码

角.json

"scripts": [
          "src/assets/gsap.min.js",
          "src/assets/Winwheel.min.js"
        ]

主页.html

<canvas id='canvas' width='500' height='500' data-responsiveMinWidth="300" data-responsiveScaleHeight="true" data-responsiveMargin="0"> Canvas not supported, use another browser. </canvas>
<button (click)="calculatePrize()"></button>

主页.ts

import {
    Component,
    ViewChild,
    ElementRef,
    OnInit
} from '@angular/core';
declare var Winwheel: any;
@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css']
}) export class HomeComponent implements OnInit {
    @ViewChild('wheelContainer') wheelContainer: ElementRef;
    theWheel;
    async ngAfterViewInit() {
        this.drawWheel();
    }
    drawWheel() {
        this.theWheel = new Winwheel({
            'canvasId': 'canvas',
            'numSegments': 4,
            'segments': [{
                'fillStyle': '#eae56f',
                'text': 'Segment 1'
            }, {
                'fillStyle': '#89f26e',
                'text': 'Segment 2'
            }, {
                'fillStyle': '#7de6ef',
                'text': 'Segment 3'
            }, {
                'fillStyle': '#e7706f',
                'text': 'Segment 4'
            }],
            'lineWidth': 2,
            'outerRadius': 250,
            'innerRadius': 50,
            'pointerAngle': 90,
            'textAlignment': 'outer',
            'textMargin': '16',
            'responsive': true,
            'animation': {
                'type': 'spinToStop',
                'duration': 30,
                'direction': 'clockwise',
                'callbackSound': this.playSound(),
                'callbackFinished': this.callbackAlert(),
            }
        });
    }
    callbackAlert() {
        console.log('callbackAlert')
    }
    playSound() {
        console.log('playing sound')
    }
    calculatePrize() {
        this.theWheel.startAnimation();
    }
}

车轮绘制和旋转成功，但 callbackSound 和 callbackFinished 不起作用 this.playSound() 和 this.callbackAlert() 在页面加载时调用，但不是在他们想要的时间

提前感谢您的帮助

标签： javascriptangular

Answer 1

您可以像这样指定回调：

'callbackFinished': () => { console.log('CALLBACK'); },

或者您可以将它们指定为实例方法，如下所示：

  playSound = () => {
    console.log('playing sound')
  }

然后像这样使用它们：

'callbackSound': this.playSound,