我一直在使用轮盘设计,我需要一个轮子,所以我使用的是winwheel.js库。
wheel;
wheelSpinning = false;
constructor() {
}
ngAfterViewInit() {
this.initWheel();
}
initWheel() {
this.wheel = new Winwheel({
'numSegments': 8, // Specify number of segments.
'outerRadius': 212, // Set radius to so wheel fits the background.
'innerRadius': 150, // Set inner radius to make wheel hollow.
'pointerAngle': 90,
'pointerGuide': // Turn pointer guide on.
{
'display': true,
'strokeStyle': 'red',
'lineWidth': 3
},
'segments': // Define segments including colour and text.
[
{ 'fillStyle': '#eae56f', 'text': 'Prize 1' },
{ 'fillStyle': '#89f26e', 'text': 'Prize 2' },
{ 'fillStyle': '#7de6ef', 'text': 'Prize 3' },
{ 'fillStyle': '#e7706f', 'text': 'Prize 4' },
{ 'fillStyle': '#eae56f', 'text': 'Prize 5' },
{ 'fillStyle': '#89f26e', 'text': 'Prize 6' },
{ 'fillStyle': '#7de6ef', 'text': 'Prize 7' },
{ 'fillStyle': '#e7706f', 'text': 'Prize 8' }
],
'animation': // Define spin to stop animation.
{
'type': 'spinToStop',
'duration': 5,
'spins': 8,
'callbackFinished': 'alertPrize()'
}
});
}
public alertPrize() {
console.log('wheel');
}
// -------------------------------------------------------
// Click handler for spin button.
// -------------------------------------------------------
startSpin() {
// Ensure that spinning can't be clicked again while already running.
if (this.wheelSpinning === false) {
this.wheel.startAnimation();
this.wheelSpinning = true;
}
}
// -------------------------------------------------------
// Function for reset button.
// -------------------------------------------------------
resetWheel() {
this.wheel.stopAnimation(false); // Stop the animation, false as param so does not call callback function.
this.wheel.rotationAngle = 0; // Re-set the wheel angle to 0 degrees.
this.wheel.draw(); // Call draw to render changes to the wheel.
this.wheelSpinning = false; // Reset to false to power buttons and spin can be clicked again.
}
一切正常,但是在车轮停止旋转后,它需要一个回调功能,以便我们可以在车轮停止旋转后编写逻辑,所以我这样传递它,
'callbackFinished': 'alertPrize()'
但在这种情况下alertPrize
需要在全局范围内,以便winwheel.js
可以访问此函数。
由于我的警报功能是在组件内声明的,因此它不适用于winwheel js。
如果我在index.html
内定义我的函数,那么它是可访问的,因为它在全局范围内
<script>
function alertPrize() {
console.log('wheel');
}
</script>
但我希望组件内部有alertPrize()
,以便我可以在其中编写一些逻辑。
有没有办法解决这个问题。
答案 0 :(得分:1)
我最后在第myTapGesture.cancelsTouchesInView = false
行修改了库Winwheel.js
,删除了将函数字符串解析为简单函数回调的eval函数:
2266
到
eval(winwheelToDrawDuringAnimation.animation.callbackFinished);
然后在你的代码中
winwheelToDrawDuringAnimation.animation.callbackFinished();
变为'callbackFinished': 'alertPrize()'
我将组件范围绑定到回调,以便它可以访问组件类属性和方法。
也许更好的方法是分叉git repo并在那里进行更改,但我没有,因为回购不在'callbackFinished': this.alertPrize.bind(this)
或bower
。