lucky-canvas
lucky-canvas copied to clipboard
buuing
转盘会出现往回转的情况
框架：react|html 包：@lucky-canvas/react 版本：0.1.13
问题描述：调用stop方法，传入索引值，停止时有时候会出现往回转的情况。
期望行为：一直向一个方向转，不要往回转
我看了结束角度的计算方式源码：https://github.com/buuing/lucky-canvas/blob/master/packages/core/src/lib/wheel.ts#L445
private carveOnGunwaleOfAMovingBoat (): void {
const { _defaultConfig, prizeFlag, prizeDeg, rotateDeg } = this
this.endTime = Date.now()
const stopDeg = this.stopDeg = rotateDeg
const speed = _defaultConfig.speed
const stopRange = (Math.random() * prizeDeg - prizeDeg / 2) * this.getLength(_defaultConfig.stopRange)
let i = 0, prevSpeed = 0, prevDeg = 0
while (++i) {
const endDeg = 360 * i - prizeFlag! * prizeDeg - rotateDeg - _defaultConfig.offsetDegree + stopRange - prizeDeg / 2
let currSpeed = quad.easeOut(this.FPS, stopDeg, endDeg, _defaultConfig.decelerationTime) - stopDeg
if (currSpeed > speed) {
this.endDeg = (speed - prevSpeed > currSpeed - speed) ? endDeg : prevDeg
break
}
prevDeg = endDeg
prevSpeed = currSpeed
}
}
想知道如何修改》
你是说, 我的代码在没改的情况下, 出现了回转? 还是说, 我的代码被你改过之后, 出现了回转 如果是前者的话, 检查你设置的速度, 速度负数会出现回转, 并且速度不能过低, 最好不要低于10
你好，我是在代码没改的情况下出现了回转。
我看了下，回转跟速度没有关系，我看了代码，回转是因为代码 https://github.com/buuing/lucky-canvas/blob/master/packages/core/src/lib/wheel.ts#L544
endDeg会出现负数的情况，然后就会往回转
麻烦请确认下这个问题，看下是不是个bug。
wheel.ts第544行： rotateDeg = quad.easeOut(endInterval, this.stopDeg, this.endDeg, decelerationTime)
this.endDeg会出现为负值的情况，导致往回转。
你是说, 我的代码在没改的情况下, 出现了回转? 还是说, 我的代码被你改过之后, 出现了回转 如果是前者的话, 检查你设置的速度, 速度负数会出现回转, 并且速度不能过低, 最好不要低于10
我是在代码没改的情况下出现了回转。 麻烦请确认下这个问题，看下是不是个bug。
wheel.ts第544行： rotateDeg = quad.easeOut(endInterval, this.stopDeg, this.endDeg, decelerationTime)
this.endDeg会出现为负值的情况，导致往回转。
你贴一下你代码, 我看看配置项都是是怎么定义的
const prizes = [
{
imgs: [
{
top: 32,
width: '70px',
height: '70px',
src: '/assets/images/casino/lucky-pot/grand.png'
}
],
fonts: [
{
top: 100,
fontSize: '12px',
fontColor: '#fff',
text: 'Grand Prize'
}
]
},
{
imgs: [
{
top: 32,
width: '70px',
height: '70px',
src: '/assets/images/casino/lucky-pot/add10.png'
}
],
fonts: [
{
top: 100,
fontSize: '12px',
fontColor: '#fff',
text: '+10s'
}
]
},
{
imgs: [
{
top: 32,
width: '70px',
height: '70px',
src: '/assets/images/casino/lucky-pot/try-again.png'
}
],
fonts: [
{
top: 100,
fontSize: '12px',
fontColor: '#fff',
text: 'Try Again'
}
]
},
{
imgs: [
{
top: 32,
width: '70px',
height: '70px',
src: '/assets/images/casino/lucky-pot/reduce60.png'
}
],
fonts: [
{
top: 100,
fontSize: '12px',
fontColor: '#fff',
text: '-60s'
}
]
},
{
imgs: [
{
top: 32,
width: '70px',
height: '70px',
src: '/assets/images/casino/lucky-pot/try-again.png'
}
],
fonts: [
{
top: 100,
fontSize: '12px',
fontColor: '#fff',
text: 'Try Again'
}
]
},
{
imgs: [
{
top: 32,
width: '70px',
height: '70px',
src: '/assets/images/casino/lucky-pot/add10.png'
}
],
fonts: [
{
top: 100,
fontSize: '12px',
fontColor: '#fff',
text: '+10s'
}
]
},
{
imgs: [
{
top: 32,
width: '70px',
height: '70px',
src: '/assets/images/casino/lucky-pot/major.png'
}
],
fonts: [
{
top: 100,
fontSize: '12px',
fontColor: '#fff',
text: 'Major Prize'
}
]
},
{
imgs: [
{
top: 32,
width: '70px',
height: '70px',
src: '/assets/images/casino/lucky-pot/try-again.png'
}
],
fonts: [
{
top: 100,
fontSize: '12px',
fontColor: '#fff',
text: 'Try Again'
}
]
},
{
imgs: [
{
top: 32,
width: '70px',
height: '70px',
src: '/assets/images/casino/lucky-pot/reduce30.png'
}
],
fonts: [
{
top: 100,
fontSize: '12px',
fontColor: '#fff',
text: '-30s'
}
]
},
{
imgs: [
{
top: 32,
width: '70px',
height: '70px',
src: '/assets/images/casino/lucky-pot/try-again.png'
}
],
fonts: [
{
top: 100,
fontSize: '12px',
fontColor: '#fff',
text: 'Try Again'
}
]
},
{
imgs: [
{
top: 32,
width: '70px',
height: '70px',
src: '/assets/images/casino/lucky-pot/add10.png'
}
],
fonts: [
{
top: 100,
fontSize: '12px',
fontColor: '#fff',
text: '+10s'
}
]
},
{
imgs: [
{
top: 32,
width: '70px',
height: '70px',
src: '/assets/images/casino/lucky-pot/mini.png'
}
],
fonts: [
{
top: 100,
fontSize: '12px',
fontColor: '#fff',
text: 'Mini Prize'
}
]
},
{
imgs: [
{
top: 32,
width: '70px',
height: '70px',
src: '/assets/images/casino/lucky-pot/try-again.png'
}
],
fonts: [
{
top: 100,
fontSize: '12px',
fontColor: '#fff',
text: 'Try Again'
}
]
},
{
imgs: [
{
top: 32,
width: '70px',
height: '70px',
src: '/assets/images/casino/lucky-pot/reduce10.png'
}
],
fonts: [
{
top: 100,
fontSize: '12px',
fontColor: '#fff',
text: '-10s'
}
]
},
{
imgs: [
{
top: 32,
width: '70px',
height: '70px',
src: '/assets/images/casino/lucky-pot/try-again.png'
}
],
fonts: [
{
top: 100,
fontSize: '12px',
fontColor: '#fff',
text: 'Try Again'
}
]
},
{
imgs: [
{
top: 32,
width: '70px',
height: '70px',
src: '/assets/images/casino/lucky-pot/add10.png'
}
],
fonts: [
{
top: 100,
fontSize: '12px',
fontColor: '#fff',
text: '+10s'
}
]
},
{
imgs: [
{
top: 32,
width: '70px',
height: '70px',
src: '/assets/images/casino/lucky-pot/reduce20.png'
}
],
fonts: [
{
top: 100,
fontSize: '12px',
fontColor: '#fff',
text: '-20s'
}
]
},
{
imgs: [
{
top: 32,
width: '70px',
height: '70px',
src: '/assets/images/casino/lucky-pot/try-again.png'
}
],
fonts: [
{
top: 100,
fontSize: '12px',
fontColor: '#fff',
text: 'Try Again'
}
]
}
]
const blocks = [
{
imgs: [
{
src: '/assets/images/casino/lucky-pot/wheel.png',
width: '100%',
rotate: true
}
]
}
]
window.onload = function () {
const myLucky = new LuckyWheel('#my-lucky', {
defaultConfig: {
speed: 20,
accelerationTime: 250,
decelerationTime: 750,
offsetDegree: 360 / 18 / 2
},
width: '714px',
height: '714px',
blocks: blocks,
prizes: prizes,
buttons: [
{
radius: '35%',
background: '#8a9bf3',
pointer: true,
fonts: [{ text: '开始', top: '-10px' }]
}
],
start: function () {
// 开始游戏
myLucky.play()
// 使用定时器模拟接口
setTimeout(() => {
// 结束游戏
const index = Math.floor(Math.random() * 18)
console.log(
'window.onload -> index',
index,
prizes[index].fonts[0].text
)
myLucky.stop(index)
}, 1000)
}
})
}
你贴一下你代码, 我看看配置项都是是怎么定义的
我把demo上传了下，请看一下： https://cowtransfer.com/s/4d0d065b7ce147 点击链接查看 [ wheel-canvas.zip ] ，或访问奶牛快传 cowtransfer.com 输入传输口令 hyxdea 查看；
原项目我下载了跑不起来，所以直接vite启动了个项目，把源码放进去了。
PS:源码没有改动，只是打印了下负值的情况
这两个值全都改一下
accelerationTime: 3000, decelerationTime: 3000,
这样动画执行的时间就会过长，用户等待的时间就太长了，不能加个判断吗？ 如果为负值，就+360度修正一下