如何确定转盘的最小/最大角度？PHP批量生成方案求助

角度计算核心逻辑 #

• 单个奖品占据角度：360 / 奖品总数
• 以箭头在正上方（Canvas坐标系下为270度，0度对应正右，顺时针旋转）为基准，每个奖品的中心角度 = 270 + 索引×单个奖品角度
• 每个奖品的角度区间：min = 中心角度 - 单个奖品角度/2；max = 中心角度 + 单个奖品角度/2
• 跨0度区间处理：当min > max时，说明区间覆盖了360度（即0度），判断时需同时检查「角度≥min」或「角度≤max」

PHP批量生成spinValues配置 #

<?php
// 奖品列表，可直接增减条目
$prizes = [
    '奖品1',
    '奖品2',
    '奖品3',
    '奖品4',
    '奖品5',
    '奖品6',
    '奖品700',
    '奖品8',
    '奖品9',
    '奖品10'
];

$prizeCount = count($prizes);
$sliceDegree = 360 / $prizeCount; // 单个奖品的角度占比
$halfSlice = $sliceDegree / 2;     // 半格角度，用于计算区间边界
$centerAngle = 270;               // 箭头所在的基准角度（正上方）

$spinValues = [];
foreach ($prizes as $index => $prize) {
    // 计算当前奖品的中心角度
    $currentCenter = $centerAngle + ($index * $sliceDegree);
    // 将角度归一到0-360范围内
    $currentCenter = fmod($currentCenter, 360);
    if ($currentCenter < 0) {
        $currentCenter += 360;
    }

    // 计算当前奖品的角度区间
    $minDegree = $currentCenter - $halfSlice;
    $maxDegree = $currentCenter + $halfSlice;

    // 修正区间边界，确保在合理范围
    if ($minDegree < 0) {
        $minDegree += 360;
    }
    // 保留360作为边界，不转为0，方便后续判断
    if ($maxDegree > 360) {
        $maxDegree -= 360;
    }

    $spinValues[] = [
        'minDegree' => round($minDegree, 2), // 保留两位小数避免精度误差
        'maxDegree' => round($maxDegree, 2),
        'value' => $prize
    ];
}

// 输出为JS可直接使用的变量
echo '<script>const spinValues = ' . json_encode($spinValues, JSON_PRETTY_PRINT) . ';</script>';
?>

JS角度匹配逻辑 #

// 转盘停止后，根据最终角度获取对应奖品
function getWinningPrize(finalAngle) {
    let angle = finalAngle % 360;
    if (angle < 0) angle += 360;

    for (const item of spinValues) {
        const { minDegree, maxDegree, value } = item;
        if (minDegree <= maxDegree) {
            if (angle >= minDegree && angle <= maxDegree) {
                return value;
            }
        } else {
            // 处理跨0度的区间（如324°-36°）
            if (angle >= minDegree || angle <= maxDegree) {
                return value;
            }
        }
    }
    return '未中奖';
}

注意事项 #

• 若箭头位置不是正上方，只需修改$centerAngle：比如箭头在正右设为0，正下方设为90，以此类推。
• 增减奖品时，直接修改$prizes数组即可，代码会自动重新计算所有角度区间。

内容的提问来源于stack exchange，提问作者martin gutierez