❤
npm
Sign UpSign In

turntable-react

0.1.0 • Public • Published

turntable-react

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

demo

在线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 -

Readme

Keywords

Package Sidebar

Install

npm i turntable-react

Repository

github.com/f840415070/turntable-react

Homepage

github.com/f840415070/turntable-react#readme

Weekly Downloads

3

Version

0.1.0

License

MIT

Unpacked Size

26.4 kB

Total Files

6

Last publish

Collaborators

  • fanyibin
Try on RunKit
Report malware