0.1.4 • Published 4 years ago

@slevin/vue-wheel-drawer v0.1.4

Weekly downloads
6
License
-
Repository
github
Last release
4 years ago

vue-wheel-drawer

standard-readme compliant

Canvas生成的vue抽奖转盘。功能完善，自定义项丰富，文档清晰。无任何依赖，简单易懂，开箱即用。

在线演示：https://slevin57.github.io/vue-wheel-drawer/

Table of Contents

功能介绍

  • 只需要奖品列表即可渲染出一个最基础的但功能完整的转盘
  • 自定义转盘大小
  • 自定义转盘旋转速度
  • 自定义转盘旋转时间
  • 自定义每一块扇形颜色
  • 自定义每一块扇形字体样式（颜色、大小、字体等）
  • 自定义扇形中字体的位置
  • 自定义转盘指针
  • 自定义转盘背景图片

安装

安装

npm i @slevin/vue-wheel-drawer --save
# yarn add @slevin/vue-wheel-drawer --save

全局注册

ES Module

import wheelDrawer from '@slevin/vue-wheel-drawer'
Vue.use(wheelDrawer)

CommonJs

const {default: wheelDrawer} = require("@slevin/vue-wheel-drawer")
Vue.use(wheelDrawer)

Script Link

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/@slevin/vue-wheel-drawer/lib/vue-wheel-drawer.umd.min.js"></script>

组件内注册

components: {
    wheelDrawer: () => import('@slevin/vue-wheel-drawer'),
}

使用

最基础用法

传入指定格式的奖品列表prizeList（必须有“name”属性）渲染转盘，每个扇形会随机生成一个背景色。 然后通过pointerClick接收组件发出的开始抽奖点击事件，再传入奖品的下标调用开始抽奖的方法。 然后通过rotateOver接收抽奖完毕事件，做出结果通知。

<template>
    <wheel-drawer
        ref="wheelRef"
        :prize-list="prizeList"
        @pointerClick="startHdl"
        @rotateOver="overHdl">
    </wheel-drawer>
</template>

<script>
    data(){
        return {
            prizeList: [
                {
                    name: "一等奖：冰箱冰箱冰箱冰箱冰箱",
                    id: 1,
                },
                {
                    name: "二等奖：彩电",
                    id: 2,
                },
                {
                    name: "二等奖：彩电",
                    id: 2,
                },
                {
                    name: "三等奖：洗衣机",
                    id: 3,
                },
            ],
            prizeIndex: 0,
        };
    },
    methods :{
        startHdl(e) {
            function getRndInteger(min, max) {
                return Math.floor(Math.random() * (max - min + 1) ) + min;
            }
            // 生成随机礼物的下标
            this.prizeIndex = getRndInteger(0, this.prizeList.length-1);

            // 调用组件开始方法，传入下标
            this.$refs.wheelRef.go(this.prizeIndex);
        },
        overHdl() {
            alert(`抽中了【 ${this.prizeList[this.prizeIndex].name} 】`);
        }
    }
</script>

为每个扇形指定背景色

为prizeList数组中每个对象增加一个bgColor属性即可。

指定每个扇形背景色

<template>
    <wheel-drawer
        ref="wheelRef"
        :prize-list="prizeList"
        @pointerClick="startHdl"
        @rotateOver="overHdl">
    </wheel-drawer>
</template>

<script>
    data(){
        return {
            prizeList: [
                {
                    name: "一等奖：冰箱冰箱冰箱冰箱冰箱",
                    id: 1,
                    bgColor: "#fff"
                },
                {
                    name: "二等奖：彩电",
                    id: 2,
                    bgColor: "#000"
                },
                {
                    name: "二等奖：彩电",
                    id: 2,
                    bgColor: "#fff"
                },
                {
                    name: "三等奖：洗衣机",
                    id: 3,
                    bgColor: "#000"
                },
            ],
            prizeIndex: 0,
        };
    },
    methods :{
        startHdl(e) {
            function getRndInteger(min, max) {
                return Math.floor(Math.random() * (max - min + 1) ) + min;
            }
            // 生成随机礼物的下标
            this.prizeIndex = getRndInteger(0, this.prizeList.length-1);

            // 调用组件开始方法，传入下标
            this.$refs.wheelRef.go(this.prizeIndex);
        },
        overHdl() {
            alert(`抽中了【 ${this.prizeList[this.prizeIndex].name} 】`);
        }
    }
</script>

自定义转盘背景图片

自定义转盘背景图的话，通过bgImg将背景图传入，这里注意：图片等分扇形的个数应该与奖品列表长度一致。 由于canvas渲染第一个扇形是水平位置开始，所以背景切图可能会与奖品位置错位。通过bgDeg调整背景图角度即可。

背景图与canvas渲染出转盘的默认角度有错位：

添加背景图，但角度错位

调整背景图角度：

调整角度后

<template>
    <wheel-drawer
        ref="wheelRef"
        :prize-list="prizeList"
        :bg-img="require('./assets/img/zp2.png')"
        :bg-deg="30"
        @pointerClick="startHdl"
        @rotateOver="overHdl">
    </wheel-drawer>
</template>

<script>
    data(){
        return {
            prizeList: [
                {
                    name: "一等奖冰箱冰箱冰箱冰箱冰箱",
                    id: 1,
                    bgColor: "#fff"
                },
                {
                    name: "二等奖：彩电",
                    id: 2,
                    bgColor: "#000"
                },
                {
                    name: "二等奖：彩电",
                    id: 2,
                    bgColor: "#fff"
                },
                {
                    name: "三等奖：洗衣机",
                    id: 3,
                    bgColor: "#000"
                },
                {
                    name: "一等奖：冰箱冰箱冰箱冰箱冰箱",
                    id: 1,
                    bgColor: "#fff"
                },
                {
                    name: "二等奖：彩电",
                    id: 2,
                    bgColor: "#000"
                },
                {
                    name: "二等奖：彩电",
                    id: 2,
                    bgColor: "#fff"
                },
                {
                    name: "三等奖：洗衣机",
                    id: 3,
                    bgColor: "#000"
                },
                {
                    name: "三等奖：洗衣机",
                    id: 3,
                    bgColor: "#000"
                },
            ],
            prizeIndex: 0,
        };
    },
    methods :{
        startHdl(e) {
            function getRndInteger(min, max) {
                return Math.floor(Math.random() * (max - min + 1) ) + min;
            }
            // 生成随机礼物的下标
            this.prizeIndex = getRndInteger(0, this.prizeList.length-1);

            // 调用组件开始方法，传入下标
            this.$refs.wheelRef.go(this.prizeIndex);
        },
        overHdl() {
            alert(`抽中了【 ${this.prizeList[this.prizeIndex].name} 】`);
        }
    }
</script>

改变字体颜色

自定义文字颜色

<template>
    <wheel-drawer
        ref="wheelRef"
        :prize-list="prizeList"
        :bg-img="require('./assets/img/zp2.png')"
        :bg-deg="30"
        :font-color="'#333'"
        @pointerClick="startHdl"
        @rotateOver="overHdl">
    </wheel-drawer>
</template>

<script>
    data(){
        return {
            prizeList: [...],
            prizeIndex: 0,
        };
    },
    methods :{
        startHdl(e) {
            function getRndInteger(min, max) {
                return Math.floor(Math.random() * (max - min + 1) ) + min;
            }
            // 生成随机礼物的下标
            this.prizeIndex = getRndInteger(0, this.prizeList.length-1);

            // 调用组件开始方法，传入下标
            this.$refs.wheelRef.go(this.prizeIndex);
        },
        overHdl() {
            alert(`抽中了【 ${this.prizeList[this.prizeIndex].name} 】`);
        }
    }
</script>

自定义指针

自定义指针

<template>
    <wheel-drawer
        ref="wheelRef"
        :prize-list="prizeList"
        :bg-img="require('./assets/img/zp2.png')"
        :bg-deg="30"
        :font-color="'#333'"
        @pointerClick="startHdl"
        @rotateOver="overHdl">
            <img src="./assets/img/pointer.png" alt="">
    </wheel-drawer>
</template>

<script>
    data(){
        return {
            prizeList: [...],
            prizeIndex: 0,
        };
    },
    methods :{
        startHdl(e) {
            function getRndInteger(min, max) {
                return Math.floor(Math.random() * (max - min + 1) ) + min;
            }
            // 生成随机礼物的下标
            this.prizeIndex = getRndInteger(0, this.prizeList.length-1);

            // 调用组件开始方法，传入下标
            this.$refs.wheelRef.go(this.prizeIndex);
        },
        overHdl() {
            alert(`抽中了【 ${this.prizeList[this.prizeIndex].name} 】`);
        }
    }
</script>

API

属性

名称说明类型默认值
prizeList必选。奖品列表,最基本格式：[{name: "一等奖"}, ...]Array-
diam转盘直径，也就是转盘大小。Number478
bgImg自定义转盘背景图片。String-
bgDeg自定义转盘图片的旋转角度。Number-
fontColor扇形中字体颜色String#FF69B4
fontWeight扇形中字体粗细Stringbold
fontSize扇形中字体大小String"17px"
fontFamily扇形中文字字体String"Microsoft Yahei,Helvetica Neue,Tahoma,Arial,PingFangSC-Regular,Hiragino Sans GB,sans-serif"
fontStyle设置扇形中字体的font属性，也就是文字的大小及样式种类等,通过传递这个属性，可以【更全面】得设置字体样式。与css中的font属性语法相同,参考。同时如果传递了这个属性，则会【忽略】：fonWeight, fontSize, fontFamily。String—
fontLineWidth奖品名称（第一行）的宽度Number100
sectorPadding每个扇形中文字距离扇形弧边的距离Number65
fontGap扇形中每行文字垂直方向的间隔Number20
rounds旋转圈数Number10
duration旋转时长Number5
timingFn旋转动画函数String"cubic-bezier(0.11, 0.77, 0.2, 0.94)"

事件

名称说明回调参数
pointerClick指针点击事件。-
rotateOver抽奖完毕，转盘停止转动。-

方法

方法名说明参数
go转盘转动抽中的奖品位于列表中的下标

Maintainers

  • cuoxiaodao

Contributing

PRs accepted.

Small note: If editing the README, please conform to the standard-readme specification.

License

MIT © 2019 cuixiaodao

vue-wheel-drawer

vuevue-wheel-drawervue-luckyvue-rotatevue幸运转盘vue抽奖转盘vue抽奖vue大转盘
core-jsvue
@everything-registry/sub-chunk-843
0.1.4

4 years ago

0.1.3

4 years ago

0.1.2

4 years ago

0.1.1

4 years ago

0.1.0

4 years ago