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有興趣的能夠本身看下源碼而後修改下，不是很難懂；

若是有更好的插件歡迎留言分享，謝謝。