turntable-react

React 抽奖转盘组件，基于 HTML canvas

在线demo演示

Features

• 即时启动，不必等待抽奖结果的接口返回再启动转盘，先转起来再说~
• 超时控制
• 支持主动中断
• 支持渲染多行文本，多张图片
• 支持自动旋转
• 样式完全自定义
• 缓慢结束效果

TODO

• 支持指针旋转模式
• ~~增加延时启动的模式（即等待抽奖接口结果返回再转动抽奖）~~

Use

npm install turntable-react or use yarn yarn add turntable-react

Example

detail example

import Turntable from 'turntable-react';

<Turntable
    size={300}
    prizes={prizes}
    onStart={fetchPrizeResult}
    onComplete={complete}
    onTimeout={timeout}
    >
    {/* 转盘指针 点击按钮 */}
    <div className="turntable-pointer">
        <img className="pointer-img" src={require('./pointer.png')} alt="" />
    </div>
</Turntable>

Run sample

1. git clone https://github.com/f840415070/turntable-react.git
2. cd turntable-react
3. yarn && yarn start
4. open broswer: http://localhost:8080/

Turntable Props

| propName | type | desc | required | default | | :-: | :-: | :-: | :-: | :-: | :-: | | size | number | 转盘大小，数值，像素单位 | true | - | | prizes | Prize[] | 奖品数据 | true | - | | onStart | (abort: () => void) => Promise or false | 点击指针时执行的函数，请求的中奖数据的接口可以写在 Promise 中并返回；返回 Promise 对象时，resolve 奖品在 prizes 里的索引，返回 false 时，转盘不会启动；在转盘转动时可使用 abort 函数主动中止转动 | true | - | | children | React.ReactNode | 转盘指针，点击按钮的自定义样式，被 Turntable 组件包裹的子代节点，如 example | false | - | | mode | string | ['immediate', 'waiting'] 两种抽奖模式，immediate 发送接口后直接转动转盘，等待有中奖数据后再结束；waiting 等待有中奖数据后再转动转盘 | false | immediate | | duration | number | 至少要转多长时间，单位毫秒，最小值3000 | false | 3000 | onComplete | (prizeIndex: number) => void | 抽奖结束即转盘停止转动后执行的回调函数，组件传递的参数是中奖的索引 | false | - | | timeout | number | 超时时间，毫秒 | false | 10000 | | onTimeout | () => void | 超时执行的回调 | false | - | | onStateChange | (isDrawing: boolean) => void | 抽奖状态改变方法，isDrawing true 进入抽奖状态，false 抽奖状态结束 | false | - | | auto | boolean | 如果转盘没有被启动，将匀速自动转动 | false | true | autoSpeed | number | 自动转动的速度，取值范围 [1, 5] | false | 2 | | autoDelay | number | 指定时间如果转盘没有被启动，将匀速自动转动，单位毫秒 | false | 5000 | | renderIfLoaded | boolean | 如果有图片需要绘制，组件会等待图片加载完成后才绘制转盘（图片没有下载完，canvas drawImage 会失败）| false | true | | renderIfLoadedTimeout | number | 开启 renderIfLoaded 后，若指定时间没有加载完所有图片，将不会等待直接绘制转盘。单位毫秒 | false | 300 | | pointToMiddle | boolean | 转盘指针指向第一个奖品正中心，而不是第一个与最后一个间隙 | false | false | | turntableBackground | string | 转盘背景色 | false | transparent |

Turntable sub types

Prize

| propName | type | desc | required | default | | :-: | :-: | :-: | :-: | :-: | :-: | | texts | PrizeText[] | 待绘制文本数组 | true | - | | background | string | 奖品块的背景色 | true | - | | images | PrizeImage[] | 待绘制的图片数组 | false | - |

PrizeText

| propName | type | desc | required | default | | :-: | :-: | :-: | :-: | :-: | :-: | | text | string | 文本 | true | - | | fontStyle | string | 与css font 属性相同，注意要传入默认字体，如 '16px Arial' | true | - | | fontColor | string | 字体颜色 | false | #000000 | | fromCenter | number | 文字距中心位置距离，取值范围 [0, 1] | true | - |

PrizeImage

| propName | type | desc | required | default | | :-: | :-: | :-: | :-: | :-: | :-: | | src | string | 图片链接，可选(与 canvasImageSource 二选一)，使用 src 属性，组件将 new Image() 创建 img 对象，对图片有其它需求的可以自己创建图片对象到 canvasImageSource | false | - | | canvasImageSource | CanvasImageSource | 自行创建 canvas 支持的图片对象 type CanvasImageSource = <HTMLOrSVGImageElement>, <HTMLVideoElement>, <HTMLCanvasElement>, <ImageBitmap>, <OffscreenCanvas> | false | - | | width | number | 图片宽度 | true | - | | height | number | 图片高度 | true | - | | fromCenter | number | 图片距中心位置距离，取值范围 [0, 1] | true | - |