Wondering what’s next for npm?Check out our public roadmap! »

    @aidol/lucky-draw

    2.0.10 • Public • Published

    aidol-lucky-draw

    A lucky draw plugin for web.

    Installation

    NPM

    $ npm i @aidol/lucky-draw -S

    SCRIPT TAG

    对于非模块化的项目,你可以将 dist/aidol-lucky-draw.umd.js 版本下载至本地使用。 她会向全局暴露一个叫做 AidolLuckyDraw 的变量。

    <body>
      <script src="/dist/aidol-lucky-draw.umd.js"></script> 
      <!-- 例如:使用幸运大转盘插件 -->
      <script>
        const { LuckyWheel } = AidolLuckyDraw;
        new LuckyWheel('#canvas', {
          //...
        })
      </script> 
    </body>

    Usage

    幸运大转盘

    最简单的使用:

    <body>
     
      <canvas id="canvas" width="500" height="500"> Canvas not supported </canvas>
     
      <script src="../dist/aidol-lucky-draw.umd.js"></script> 
     
      <script>
          const { LuckyWheel } = AidolLuckyDraw;
     
          new LuckyWheel("#canvas", {
            duration: 5000,
            awards: [
              { type: "text", content: "iphone8" },
              { type: "text", content: "大保健" },
              { type: "text", content: "10元话费" },
              { type: "text", content: "10元优惠券" },
              {
                type: "image",
                content:
                  "https://img12.360buyimg.com/n7/jfs/t4807/209/1436278963/496606/8e486549/58f0884eNcec87657.jpg",
              },
              { type: "text", content: "50元优惠券" },
              { type: "text", content: "10个大嘴巴子" },
              { type: "text", content: "100元话费" },
            ],
            fetchAward: function (awards) {
              console.log(awards); // 奖项列表
     
              // 你可以在这定义获奖规则
              // 插件本身只需要管交互效果
     
              let index = Number.parseInt(Math.random() * 10);
              if (index > awards.length - 1) {
                index = awards.length - 1
              }
              console.log(index);
              return index; // 需要返回中奖下标索引值
            },
            beforeStart: function(done) {
              // 如果,你只是想在转盘开始旋转前,做些其它事情,而不是拉取中奖项索引
              // 你可以在最后执行 done(-1),这时候,你就必须定义 fetchAward 函数
              done(-1)
              return
              // 或许你想将中奖概率,获奖规则交给后端控制
              // 那么,你可以在该钩子函数中调起一个异步接口来获取中奖项
              setTimeout(() => {
                const awardedIndex = 4
                // 将中奖项索引转入 done 回调,并执行
                done(awardedIndex)
              }, 2000)
            },
            finish: function (index, awards) {
              console.log(index, awards);
            }
          })
      </script> 
    </body>

    可配置参数:

    属性 是否必选 类型 备注 默认值
    outsideRadius number 大转盘的半径,这个值乘以二不能大于 canvas 画布的宽或者高哟! canvas 宽度值 - 50
    awards Object 奖品信息,每组对象代表一个奖项,对象中有两个属性,typecontent
    type 有三个可能的值:

    text:将 content 中的值输出为普通文本;
    losing:将 content 中的值输出普通文本,状态为未中奖;
    image: 将 content 中的图片地址渲染为图片。
    []
    evenColor string 大转盘第偶数个奖品盘颜色 #FF6766
    oddColor string 大转盘第奇数个奖品盘颜色 #FD5757
    loseColor string 大转盘未中奖表盘颜色 #F79494
    textColor string 大转盘奖品文字颜色 White
    arrowColorFrom String 指针渐变色的第一个颜色 #FFFC95
    arrowColorTo string 指针渐变色的第二个颜色 #FF9D37
    buttonFont string 抽奖按钮的文字 START
    buttonFontColor string 抽奖按钮文字的颜色 #88411F
    buttonColorFrom string 抽奖按钮渐变色的第一个颜色 #FDC964
    buttonColorTo string 抽奖按钮渐变色的第二个颜色 #FFCB65
    startRadian number 大转盘绘制的起始角度 0
    duration number 大转盘旋转的时间,单位,毫秒数 5000
    finish Function 获取奖品信息后的回调,返回一个中奖下标和当前奖项列表 undefined
    fetchAward Function 抓取获奖奖品索引函数,该函数被传入奖品列表参数,需返回一个中奖项下标,插件内部会根据中奖下标执行动画 undefined
    animation Function 自定义大转盘旋转动画缓动函数 源码内部使用 easeOut 的模式
    beforeStart Function 大转盘动画开始前钩子函数,被转入 done 回调函数作为参数,如果使用了该钩子函数, done 函数必须被执行,你可以对 done 回调传入 中奖下标-1 /

    缓动函数可以参考下面项目:

    Tween.js


    可用的实例方法:

    方法名 参数 描述
    updateAwards awards 新的奖项列表数据 更新大转盘奖项数据,并重绘大转盘。

    幸运九宫格

    最简单的使用:

    <body>
        <canvas id="canvas" width="500" height="500">Canvas not supported</canvas>
     
        <script src="/dist/aidol-lucky-draw.umd.js"></script> 
        <script>
          const { LuckySudoku } = AidolLuckyDraw;
     
          new LuckySudoku('#canvas', {
            awards: [
              {type: 'text', content: '30元话费'},
              {type: 'text', content: 'iphone8'},
              {type: 'losing', content: '未中奖'},
              {type: 'text', content: 'MackBook Pro'},
              {type: 'image', content: 'https://img12.360buyimg.com/n7/jfs/t4807/209/1436278963/496606/8e486549/58f0884eNcec87657.jpg'},
              {type: 'losing', content: '未中奖'},
              {type: 'image', content: 'https://img11.360buyimg.com/n7/jfs/t3187/325/423764794/213696/f4eb1dbd/57b68142Nbe104228.jpg'},
              {type: 'text', content: '火星一日游'}
            ],
            finish: function (index) {
              switch(this.awards[index].type) {
                case 'text':
                    alert('🎉恭喜您中得:' + this.awards[index].content);
                    break;
                case 'image':
                    if (index === 4)      alert('🎉恭喜您中得战争磨坊水冷机');
                    else if (index === 6) alert('🎉恭喜您中得魔声耳机');
                    break;
                case 'losing':
                    alert('💔很遗憾,您没有中奖~');
                    break;
              }
            }
          })
        </script> 
    </body>

    可配置参数:

    属性 是否必选 类型 备注 默认值
    sudokuSize number 九宫格的尺寸,一般为 canvas 的尺寸 当前 canvaswidth
    awards Object 奖品信息,每组对象代表一个奖项,对象中有两个属性,typecontent
    type 有三个可能的值:

    text: 将 content 中的值输出为普通文本;
    losing:content 中的值输出普通文本,状态为未中奖;
    image: 将 content 中的图片地址渲染为图片。
    []
    sudokuItemRadius number 奖项小方块的圆角大小 8
    sudokuItemUnactiveColor string 奖项方块的颜色 rgb(255, 235, 236)
    sudokuItemUnactiveTxtColor string 奖项方块文字的颜色 rgb(48, 44, 43)
    sudokuItemUnactiveShadowColor string 奖项方块阴影的颜色 rgb(255, 193, 200)
    sudokuItemActiveColor string 跳动方块的颜色 rgb(254, 150, 51)
    sudokuItemActiveTxtColor string 跳动方块文字的颜色 rgb(255, 255, 255)
    sudokuItemActiveShadowColor string 跳动方块阴影的颜色 rgb(255, 193, 200)
    buttonFont string 按钮文案 START
    buttonColor string 按钮的颜色 rgb(255, 216, 1)
    buttonTextColor string 按钮文字的颜色 rgb(172, 97, 1)
    buttonShadowColor string 按钮阴影的颜色 rgb(253, 177, 1)
    duration number 动画时长 4000
    velocity number 动画速率变化值(峰值) 300
    hasButton boolean 九宫格是否自带按钮;
    若设置为 false,九宫格没有按钮,需要用户在外部自定义抽奖按钮;
    抽奖按钮需调用对象的 luckyDraw() 方法;
    true
    finish Function 获取奖品信息后的回调,返回一个下标,根据该下标查找抽到什么奖品 /
    fetchAward Function 抓取获奖奖品索引函数,该函数被传入奖品列表参数,需返回一个中奖项下标,插件内部会根据中奖下标执行动画 undefined
    animation Function 自定义大转盘旋转动画缓动函数 源码内部使用 easeOut 的模式
    beforeStart Function 大转盘动画开始前钩子函数,被转入 done 回调函数作为参数,如果使用了该钩子函数, done 函数必须被执行,你可以对 done 回调传入 中奖下标-1 /

    手动调用抽奖的方法

    const sudoku = new LuckySudoku({
      // ...
      hasButton: false
      // ...
    });
     
    button.addEventListener('click', function (e) {
      sudoku.luckyDraw();
    })

    幸运刮刮卡

    最简单的使用:

    <body>
        <canvas id="canvas" width="250" height="50">
            Canvas not supported
        </canvas>
     
        <script src="/dist/aidol-lucky-draw.umd.js"></script> 
        <script> 
          const { LuckyScratchCard } = AidolLuckyDraw;
     
          new LuckyScratchCard('#canvas', {
            awardBackgroundImage: 'http://tse3.mm.bing.net/th?id=OIP.X7zblF16pKGur6refGZsWQEsDg&pid=15.1'
          })
        </script> 
    </body>

    可配置参数:

    属性 是否必选 类型 备注 默认值
    awardBackgroundImage string canvas 的背景图片,刮开涂层后的奖项 /
    style string 控制 canvas 的样式 /
    eraserSize string 控制橡皮擦的半径大小,单位 px 15
    coverColor string 控制表面涂层的颜色 #B5B5B5

    Install

    npm i @aidol/lucky-draw

    DownloadsWeekly Downloads

    2

    Version

    2.0.10

    License

    MIT

    Unpacked Size

    86.1 kB

    Total Files

    14

    Last publish

    Collaborators

    • avatar