После создания случайного индекса он должен найти свою начальную степень и вычислить минимальный максимальный диапазон, чтобы колесо останавливается где-то между градусами этого сектора.
Может кто-нибудь сказать мне, чего мне здесь не хватает, потому что оно не работает должным образом.
ДЕМО компонента WheelSpin: https://playcode.io/2211878:
То, о чем я говорю, — это метод spin():
Код: Выделить всё
function spin() {
if (isSpinning.value) return;
isSpinning.value = true;
const targetIndex = getRandomSectorIndex();
const extraSpins = Math.floor(4 + Math.random() * 4);
const angle = 360 / sectors.value.length;
const randomMinMax = (m: number, M: number) => Math.random() * (M - m) + m;
// Target sector angle
const min = targetIndex * angle;
const max = min + angle;
const targetRotation = randomMinMax(min, max);
const rotateTo = currentRotation.value + 360 * extraSpins + targetRotation;
console.log(`Should be: ${sectors.value[targetIndex].code} at index ${targetIndex} of ${targetRotation}deg`);
console.log('rotate to:', rotateTo);
isSpinning.value = false;
if (wheel.value) {
wheel.value.style.transition = 'transform 5s cubic-bezier(0.3, 0, 0.1, 1)';
wheel.value.style.transform = `rotate(${rotateTo}deg)`;
}
currentRotation.value = rotateTo;
setTimeout(() => {
isSpinning.value = false;
// Calculate stopped sector
const normalizedRotation = currentRotation.value % 360;
const sectorIndex = Math.floor(normalizedRotation / 30) % sectors.value.length;
// Reverse index because rotation is clockwise
const reversedIndex = sectors.value.length - 1 - sectorIndex;
done(reversedIndex);
}, 5000);
}
Я понятия не имею, как остановить колесо в определенном секторе.
Я пытался повернуть колесо с помощью CSS, но не уверен, что это хорошая идея.
Я понятия не имею, как остановить колесо в определенном секторе.
п>
Подробнее здесь: https://stackoverflow.com/questions/793 ... gle-degree
Мобильная версия