@slevin/vue-wheel-drawer

v0.1.4

Published

3 years ago

[![standard-readme compliant](https://img.shields.io/badge/standard--readme-OK-green.svg?style=flat-square)](https://github.com/RichardLitt/standard-readme)

Downloads

0High
0Medium
0Low

slevin

vue vue-wheel-drawer vue-lucky vue-rotate vue幸运转盘 vue抽奖转盘 vue抽奖 vue大转盘

vue-wheel-drawer

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

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

vue-wheel-drawer

功能介绍

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

安装

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 | 转盘直径，也就是转盘大小。 | Number | 478 | | bgImg | 自定义转盘背景图片。 | String | - | | bgDeg | 自定义转盘图片的旋转角度。 | Number | - | | fontColor | 扇形中字体颜色 | String | #FF69B4 | | fontWeight | 扇形中字体粗细 | String | bold | | 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 | 奖品名称（第一行）的宽度 | Number | 100 | | sectorPadding | 每个扇形中文字距离扇形弧边的距离 | Number | 65 | | fontGap | 扇形中每行文字垂直方向的间隔 | Number | 20 | | rounds | 旋转圈数 | Number | 10 | | duration | 旋转时长 | Number | 5 | | 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

vue-wheel-drawer

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

vue-wheel-drawer

Table of Contents

功能介绍

安装

使用

最基础用法

为每个扇形指定背景色

自定义转盘背景图片

改变字体颜色

自定义指针

API

属性

事件

方法

Maintainers

Contributing

License