WheelCore - 轻量级全交互自定义转盘

WheelCore 是一个零依赖、无状态、纯 Canvas 渲染的原生 JavaScript 转盘库。

核心特性

开箱即用：单文件引入，全局挂载 WheelCore，不污染其他全局变量。
高性能渲染：采用原生 Canvas 渲染，内部对旋转角度做了限制处理，避免在 Safari 等浏览器上出现因大角度旋转导致的渲染卡死。
全端交互适配：
- PC 端：鼠标悬停立刻展示详细信息，并随鼠标平滑移动。
- 移动端：触屏长按 1 秒展示信息，点按空白处智能关闭。
智能文本截断：超长文字自动截断并显示省略号，绝不溢出扇区变形，可通过浮窗查看完整内容。
双概率模式：支持“视觉均分（equal）”与“比例缩放（proportional）”。
主题与自定义：内置深色/浅色主题，中间按钮颜色完全可定制。
动态数据驱动：无状态设计，随时通过 setOptions 替换转盘数据。

快速开始

1. 引入文件

通过 <script> 标签引入 CDN 文件：

<script src="https://wheelcore.longmoon.top/wheelcdn.js"></script>

2. 准备容器

只需要一个空 div，你可以把它放在页面的任何位置：

<div id="my-wheel"></div>

3. 初始化实例

const wheel = new WheelCore('#my-wheel', {
  size: 300,
  options: [
    { name: '一等奖', color: '#FF6B6B', probability: 5 },
    { name: '二等奖', color: '#4ECDC4', probability: 15 },
    { name: '谢谢参与', color: '#FFD166', probability: 80 }
  ],
  onResult: function(result, index) {
    console.log('抽中:', result.name);
    alert('抽中了: ' + result.name);
  }
});

初始化配置 (Options)

在 new WheelCore(container, config) 时，支持传入以下配置项：

参数	类型	默认值	说明
`size`	Number	320	转盘的直径（px），库内部会自动处理高清屏 Retina 适配。
`options`	Array	[]	转盘的数据项，详见下方。
`theme`	String	'dark'	主题模式，支持 `'dark'` 或 `'light'`。
`buttonColor`	String	null	自定义中间“开始”按钮的颜色，如 `'#4ECDC4'`。不传则使用主题默认色。
`probabilityMode`	String	'equal'	概率模式：`'equal'`（扇区均分）或 `'proportional'`（扇区大小按概率比例）。
`liveResult`	Boolean	false	是否开启实时结果滚动。开启后，旋转时底部文字会快速跳动显示当前指针对准的项。
`spinDuration`	Number	4500	旋转动画时长（毫秒）。
`spinTurns`	Number	5	旋转动画经过的圈数（固定 5 圈，防止大角度溢出）。
`pointerAngle`	Number	270	指针位置（角度）。默认 270 度，即正上方。
`autoDistribute`	Boolean	true	如果所有选项概率加起来为 0，是否自动均分概率。
`palette`	Array	`[...]`	默认的颜色池。如果 `options` 中未指定颜色，将按此池依次取色。

options 数据项格式

必须是一个包含对象的数组，每个对象代表一个扇区：

{
  name: '选项名称',     // 必填，字符串
  color: '#FF0000',    // 选填，十六进制颜色，不填会自动从调色板分配
  probability: 20      // 选填，中奖权重。如果开启 proportional 模式，此值直接影响视觉面积。
}

回调函数 (Callbacks)

可以在初始化配置中传入：

方法	参数	说明
`onSpinStart`	无	转盘刚开始旋转时触发。
`onResult`	`(result, index)`	转盘完全停下后触发。`result` 为抽中的选项对象，`index` 为其索引。
`onTick`	`(result, index)`	旋转过程中，指针每跨过一个扇区触发一次（高频，如非必要不建议使用）。

实例方法 (API)

初始化后，可以通过 wheel.xxx() 调用以下方法：

数据管理

setOptions(options)：替换当前转盘的所有数据并重绘。注意：如果转盘正在旋转中，调用此方法会返回 false 并被拦截。
getOptions()：获取当前所有选项的深拷贝数组。

状态与交互

spin()：触发转盘开始旋转（与点击中间的按钮效果一致）。
reset()：重置转盘，将角度归 0，状态清空。
setProbabilityMode(mode)：动态切换概率模式，传 'equal' 或 'proportional'。

外观控制

setTheme(theme)：动态切换主题，传 'dark' 或 'light'。
setButtonColor(color)：动态修改按钮颜色，传 null 恢复主题默认。
setLiveResult(bool)：动态开启或关闭实时结果滚动。

销毁

destroy()：彻底销毁转盘实例。移除所有 DOM 节点、事件监听器（包括挂载在 document 上的全局监听）和定时器。在单页应用（SPA）中切换页面时务必调用此方法。

进阶提示

动态数据驱动：WheelCore 是无状态的。如果需要更换数据或轮次，直接调用 wheel.setOptions(newData) 即可，无需销毁重建。
内存泄漏防范：为了实现点击空白处关闭浮窗，库内部在初始化时注册了全局的 touchstart / mousedown 监听。如果不调用 destroy()，监听器会一直存在。
长文本处理：内部实现了算法自适应截断，但为了保证视觉美观，建议 size 不要小于 120，选项过多（大于 8 个）时建议精简文字。
概率模式说明：在 equal 模式下，视觉上所有扇区一样大，但后台抽奖依然按 probability 权重计算。在 proportional 模式下，扇区大小按概率占比划分。

开源协议

MIT License