平时给项目做运营活动页或者写小程序时，最烦的就是手搓大转盘和九宫格抽奖，自己算扇形角度、调缓动动画曲线特别费时间。前阵子在 GitHub 翻到 lucky-… · @likebookmark · TwKit

@likebookmark

平时给项目做运营活动页或者写小程序时，最烦的就是手搓大转盘和九宫格抽奖，自己算扇形角度、调缓动动画曲线特别费时间。前阵子在 GitHub 翻到 lucky-canvas 这个开源组件库，拿来试了一下确实省了不少事。 它专门用来做网页和移动端里的抽奖交互，把常见的大转盘、九宫格、老虎机都基于 Canvas 封装成了现成的组件。你只需要把奖品文字、图标和配色塞进配置项里，就能直接跑起顺滑的抽奖动画，最终停在哪个奖品上也可以由后端接口直接控制。 用下来有几个细节挺贴心的： - 跨端支持做得很全，不管是原生 JS、Vue2/3、React，还是微信小程序、UniApp 和 Taro 都有对应的封装包可以直接引 - 针对 Canvas 绘制里最磨人的文字自动换行、高清屏缩放模糊和图片预加载都做了内置处理，不用自己再去写一堆计算逻辑 - 扇形区块、格子大小、按钮样式和旋转的加减速节奏都能自由调整，应付各种活动设计稿基本够用 不过在微信小程序环境里用的时候，因为小程序底层 Canvas 的层级限制，如果遇到需要把中奖弹窗盖在转盘上方的场景，偶尔还是得稍微留意一下原生组件的层级覆盖问题，非常适合平时经常要赶营销活动页或者做小程序开发的前端朋友备在工具箱里。 GitHub：https://github.com/buuing/lucky-canvas 平时淘到的好东西我都随手收录在小站了：https://ai.likebookmark.com/ #GitHub #开源分享 #前端开发 #独立开发

曝光 24 · 评论 0 · 点赞 0 · 书签 0