Giter Club home page Giter Club logo

buuing / lucky-canvas Goto Github PK

View Code? Open in Web Editor NEW
7.1K 40.0 858.0 5.81 MB

🎖🎖🎖 基于 TS + Canvas 开发的【大转盘 / 九宫格 / 老虎机】抽奖插件,🌈 一套源码适配多端框架 JS / Vue / React / Taro / UniApp / 微信小程序等,🎨 奖品 / 文字 / 图片 / 颜色 / 按钮均可配置,支持同步 / 异步抽奖,🎯 概率前 / 后端可控,🚀 自动根据 dpr 调整清晰度适配移动端

Home Page: https://100px.net

License: Apache License 2.0

JavaScript 39.12% HTML 5.41% TypeScript 41.48% CSS 0.19% Vue 13.81%
vue lucky-draw canvas javascript react taro uni-app

lucky-canvas's Introduction

logo

lucky-canvas 抽奖插件

一个基于 JavaScript 的跨平台 ( 大转盘 / 九宫格 / 老虎机 ) 抽奖插件

stars forks author license downloads

适配框架 npm包 最新版本 npm下载量
JS / JQ lucky-canvas version downloads
Vue @lucky-canvas/vue version downloads
React @lucky-canvas/react version downloads
UniApp @lucky-canvas/uni version downloads
Taro3.x @lucky-canvas/taro version downloads
微信小程序 @lucky-canvas/mini version downloads

官方文档 & Demo演示

中文https://100px.net

EnglishIf anyone can help translate the document, please contact me [email protected]


贡献者

🤖 🛰 📚
🦄
🛰
🛰
🛰
🛰
🛠 🎨
🛠
🛠
🛠
🛠
🛠
🛠
🛠
📚
📚
🎨
🎨
🎨
🎨
🎨
🛰

🙏🙏🙏 点个Star

如果您觉得这个项目还不错, 可以在 Github 上面帮我点个star, 支持一下作者 ☜(゚ヮ゚☜)


问题反馈

  • Bug 反馈请直接去 Github 上面提 Issues,我会实时收到邮件提醒前去查看
  • 如果是小白需要技术指导的话, 左边是我的赞赏码, 备注好你的微信号, 我看到后会主动加你
  • 但如果是因为我文档没写清楚,或者是插件本身的bug,导致你无法正常使用的话,赞赏全额返还

注好你的微信号! 微信看不到赞赏人信息 所以你必须在备注里写上



友情链接

lucky-canvas's People

Contributors

buuing avatar deja-vuuu avatar dora1995 avatar jink-e avatar luck-draw avatar muyibo avatar panyu97py avatar pointline avatar qingtiantongxie avatar theozhang32 avatar void1005 avatar xutaotaotao avatar yushen7 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

lucky-canvas's Issues

草你吗的

浪费老子时间,开始转的回调 已经改变了currIndex,转完指针竟然停在一开始默认的currIndex,去你吗的啊,测都不测完尼玛的,难不成刚进页面就请求???日你大爷,给你一🔪。

在vue3里面引入九宫格报错

runtime-core.esm-bundler.js?5c40:1781 Uncaught (in promise) TypeError: Right-hand side of 'instanceof' is not an object

<template>
  <div class="draw">
    <LuckyGrid
      style="width: 265px; height: 200px"
      rows="3"
      cols="4"
      :blocks="[{ padding: '5px', background: '#ff4a4c', borderRadius: 10 }]"
      :prizes="[
        { x: 0, y: 0, fonts: [{ text: '0元', top: 20 }] },
        { x: 1, y: 0, fonts: [{ text: '1元', top: 20 }] },
        { x: 2, y: 0, fonts: [{ text: '2元', top: 20 }] },
        { x: 3, y: 0, fonts: [{ text: '3元', top: 20 }] },
        { x: 3, y: 1, fonts: [{ text: '4元', top: 20 }] },
        { x: 3, y: 2, fonts: [{ text: '5元', top: 20 }] },
        { x: 2, y: 2, fonts: [{ text: '6元', top: 20 }] },
        { x: 1, y: 2, fonts: [{ text: '7元', top: 20 }] },
        { x: 0, y: 2, fonts: [{ text: '8元', top: 20 }] },
        { x: 0, y: 1, fonts: [{ text: '9元', top: 20 }] },
      ]"
      :button="{ x: 1, y: 1, col: 2, fonts: [{ text: '抽奖按钮', top: 20 }] }"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "Draw",
  data() {
    return {
      userId: "1231231231231221",
      userType: "",
      message: "",
      count: "",
      originId:
        process.env.DOMAIN_ENV == "dev" ? "gh_591ecf2e2417" : "gh_9fef032315c1",
    };
  },
});
</script>

<style lang="scss" scope="scope">
.demo {
  img {
    width: 250px;
  }
}
</style>

默认配置defaultConfig

传入开始旋转时间和缓慢旋转时间,没有生效,且直接调用stop停止旋转时,从开始到完全停止结束,有15S,不知道出现了什么问题

开始前的方法

我想在点击抽奖前 写一些方法 执行完成了再开始抽奖

小程序下安卓真机渲染异常

该问题是因为微信小程序的 canvas 组件的 arcTo 绘制异常导致的, 微信团队于 18 年确认了这个 bug , 但是至今未修复

目前的解决方案是使用 arc 代替 arcTo , 但是就无法使用 gutter 属性了, 并且我还需要时间来做兼容, so请大家耐心等待

感觉转的时间有点久

加一个结束的时间好一点,且每一个奖品块里面加一个奖品Icon图标的设置会好很多

概率和接口问题

请问怎样可以配置概率 或者可不可以接口返回哪个值 之后转盘就转到哪个值

关于大转盘Fonts属性的

可以看到您的fonts属性 需要的是一个数组值,里面支持修改字体颜色,样式等等,但是您的fonts中的text为什么接收的是以个数组呢,不应该是{ text: "1元红包", top: '10%',fontColor:"red"},
{ text: "100元红包", top: '10%',fontColor:"green"},
{ text: "0.5元红包", top: '10%',fontColor:"yellow"},
这样嘛?不然字体的颜色和样式不可以区分修改,那些属性将没有意义了, 或许这个不是bug,但是我觉得这样可能更方便一点,希望您帮忙改一下

大转盘设置速度低于20的时候, 减速会变的很不自然, 建议先使用20 ~ 30

版本:<= v3.2.1

问题描述: 大转盘中当defaultConfig.speed设置的值低于20的时候, 减速的时候会不太自然, 九宫格看着还行

预计优化时间: 我ts移植完之后会再次优化一下减速函数, 目前大转盘推荐的速度为20 ~ 30

如果你遇到了该问题并希望使用低于20的速度, 请下面留言, 我会在修复之后第一时间回复你

圆形转盘img格式

请问在圆形转盘中的img支持传入的格式有哪些?除了本地可以,base64,blob可以吗?

页面不显示,控制台html有代码

第一步:npm i vue-luck-draw
第二部:main.js 里面
import LuckDraw from 'vue-luck-draw'
Vue.use(LuckDraw)
第三步:页面使用

  


    
    <LuckyWheel
      style="width: 520px; height: 520px"
      v-model="currIndex"
:awards="awards"
:rate="rate"
:radius="radius"
:textFontSize="textFontSize"
:lineHeight="lineHeight"
:textColor="textColor"
:textMargin="textMargin"
:textPadding="textPadding"
:btnFontSize="btnFontSize"
:btnColor="btnColor"
:btnBorderColor1="btnBorderColor1"
:btnBorderColor2="btnBorderColor2"
:btnBorderColor3="btnBorderColor3"
:btnBgColor="btnBgColor"
:btnText="btnText"
:btnRadius="btnRadius"
:borderColor="borderColor"
@start="handleStart"
@EnD="handleEnd"
    />
  

<script> export default { data () { return { currIndex: 0, // 奖品的索引 rate: 80, // 转盘速率 radius: 180, // 转盘半径 textFontSize: '13px', // 文字大小 lineHeight: 20, // 文字行高 textColor: '#d64737', // 文字颜色 textMargin: 30, // 文字距离边框距离 textPadding: 0, // 文字补偿宽度 btnFontSize: '26px', // 按钮文字大小 btnColor: '#d64737', // 按钮文件颜色 btnBorderColor1: '#d64737', // 按钮外边框颜色 btnBorderColor2: '#ffffff', // 按钮内边框颜色 btnBorderColor3: '#f6c66f', // 按钮指针颜色 btnBgColor: '#ffdea0', // 按钮背景颜色 btnText: '抽奖', // 按钮内容 btnRadius: 60, // 按钮半径 borderColor: '#d64737', // 边框颜色 awards: [ // 奖品 { name: '价值5988元华为 P30pro', color: '#f9e3bb' }, { name: '价值398元车载空气净化器', color: '#f8d384' }, { name: '价值25元百叶帘遮阳挡', color: '#f9e3bb' }, { name: '16元油卡套餐红包', color: '#f8d384' }, { name: '5元油卡直冲红包', color: '#f9e3bb' }, { name: '3元话费直冲红包', color: '#f8d384' }, { name: '价值32元重力感应手机支架', color: '#f9e3bb' }, { name: '价值198元手提迷你车在保温冷藏箱', color: '#f8d384' }, ], } }, methods: { handleStart () { console.log('开始抽奖') }, handleEnd (index) { alert('恭喜您抽到大奖, 奖品为' + this.awards[this.currIndex].name) } } } </script>

目前尚未兼容app端

机型:红米10x
系统:安卓10

[Vue warn]: Error in event handler for "view.vdSyncCallback": "TypeError: e.getSystemInfoSync is not a function"

大转盘不显示图片?

微信截图_20201201115721
如图,通过接口拿到的奖品信息,里面有图片地址并且能够访问到图片,还有个本地base64的图片,结果转盘上不能显示图片。
同样的数据复制出来,写死数据,能够正常渲染。这是为什么啊?

3.16

有3.16版本的实例代码吗,我一直没有找到。

执行this.$refs.LuckDraw.play()报错

star!!
请问执行 this.$refs.LuckDraw.play() 后报错,求大佬帮忙看看
Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.

奖品背景颜色设置不生效问题

ctx.fillStyle = awards[i].color || i % 2 == 0 ? '#f8d384' : '#f9e3bb' 这里存在bug ,运算符优先级问题,括号把后面括起来应该可以解决

异步抽奖

您好。您插件的异步抽奖,可以在接口返回数据之前,开始转动吗?因为接口延迟的原因会出现点击按钮不能及时转动的情况。

移动端适配问题

您好,移动端如何适配?用rem单位不生效,还是固定的大小。所以怎么适配移动端的不同屏幕而等比例的放大缩小

小程序构建完成后无法找到lucky-canvas.js

小程序构建完成后,编译执行无法执行,报错
WX20201207-100935

appservice?t=1607306804020:1237 miniprogram_npm/mini-luck-draw/lucky-grid/index.js:
Error: module "miniprogram_npm/mini-luck-draw/lucky-grid/lucky-canvas.js" is not defined
at require (VM157 WAService.js:18)
at VM157 WAService.js:18
at Object. (external "lucky-canvas":1)
at webpack_require (bootstrap:19)
at Object. (index.js:1)
at webpack_require (bootstrap:19)
at bootstrap:83
at bootstrap:83
at wrapFn (appservice?t=1607306804020:1230)
at require (VM157 WAService.js:18)

抽奖次数问题

怎么设置抽奖次数 如果是0次 就不能抽奖 要怎么配置

异步请求目前还是不行

"vue-luck-draw": "^1.2.0",

异步请求好像还不对,给的例子,异步怎么搞?是我哪里姿势不对?

即将新增九宫格抽奖! 以及重构后的大转盘抽奖

九宫格抽奖 (新增)

  • 支持m*n宫格自定义配置 (可以配置任意n宫格, 随意纵向或横向合并宫格, 任意大小, 任意形状随心控制)
  • 文字可以配置绘制样式, 字体大小, 字体行高, 随意控制换行
  • 支持引入多图片, 并支持实时更新图片的渲染, 比如抽奖次数的更新, 或者奖品的更新
  • 针对移动端显示效果, 可以自动根据dpr (设备像素比) 调解 canvas 的显示清晰度

大转盘抽奖 (重构之后)

  • 会对参数进行调整 (更加规范语义化)
  • 支持多图片引入
  • 可自定义渲染抽奖的指针
  • 同样会根据dpr自动调解清晰度

activeStyle 添加缩放功能

抽奖中标,或者划过中标,希望可以进行缩放(放大效果)。这个怎么做呢?有相关配置吗

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.