lottery-turntable - 抽奖转盘

lottery-turntable - 抽奖转盘

这周五临时接到新项目，要做一个抽奖转盘，由于时间紧迫就找了个库，使用lottery-turntable这个库，因为"这个插件只实现了绘画转盘及转盘转动的模块. "可扩展性比较高，所已选择它

安装

npm install lottery-turntable
复制代码

相关说明

var turntable = new Turntable({
  type: 'transition', //转盘转动类型
  size: 320, //转盘尺寸，默认为320
  textSpace: 15, //奖品名称距离转盘边距，默认为15
  imgSpace: 50, //奖品图片距离转盘边距，默认为50
  speed: 5, //触发start事件后，转盘开始转动的速度，数字必须能给360整除
  fastSpeed: 10, //转盘进入高速转动的速度，数字必须能够给360整除
  slowSpeed: 5, //转盘从高速转动降下来的速度，数字必须能够给360整除
  speedUp: 2000, //多少毫秒后进入高速转动
  speedDown: 2000, //触发stop事件后，多少毫秒进入缓速
  values: [
  {
      id: 1, //奖品id，可以重复（比如：谢谢参与就可以有n个，中奖后会随即选择一个转动到该位置
      name: '一等奖', //奖品名称
      img: {
        src: 'gift.png', //奖品图片路径
        width: 50, //奖品图片宽度，请根据实际情况去设置，避免太大
        height: 50, //奖品图片高度，请根据实际情况去设置，避免太大，与宽度等比率缩放
      },
      bg: '#ccc', //该奖品的在转盘中的扇形背景颜色
      fill: '#000' //奖品名称的文字颜色
  },
  ...
  ], //奖品对象，根据传多少个奖品对象，自动生成相应数量的转盘抽奖内容
  container: document.getElementById('id') //转盘的容器，如果设置了之后，new Turntable的时候会自动填充内容
});
复制代码

事件说明

draw 将转盘实例化到容器当中，如果设置container属性，则不需要调用该方法

turntable.draw(document.getElementById('container'));
复制代码

start 开始抽奖（开始转动转盘）

turntable.start();
复制代码

stop 抽奖结束（停止转动转盘）

turntable.stop(id, function(data) {
  console.log(data); //对应在values里面的礼品对象
});
复制代码

goto（只能用于transition方式的抽奖）

//跳转到指定的id的奖品，在请求后台取得中奖奖品id后，就滚动到对应的奖品
turntable.goto(id, function(data) {
  console.log(data); //对应在values里面的礼品对象
});
复制代码

核心文件就是turntable.js,index.js, tween.js有兴趣的可以自己看下源码然后修改下，不是很难懂；

如果有更好的插件欢迎留言分享，谢谢。