小程序实现大转盘抽奖----踩坑之路

需求：现在有一个小程序抽奖页面如下，此类抽奖方式为大转盘（另一种是九宫格）

 

 

思路：由服务的获取：可抽奖次数和奖品列表，利用canvas渲染每一奖品分区背景，利用rotate和for呈现各分区奖品名，最后利用小程序动画animation将转盘转起来，思路很好，但是真机运行如下：

 

存在问题：

1.抽奖按钮没了
2. 奖品没有出来
3.点击抽奖时点击事件有效，但是没有动画也没有调用方法里的接口，控制台显示：

Invoke event getLottery in page: pages/lottery/lottery 

4.值得一提的是，所有问题在小程序IDE的模拟器上，都不会出现，只在真机出现，我测试的机型是：Xiaomi MI-MAX

 

查看官方文档后发现：

1.原来一切都是层级问题，抽奖按钮被挡了，奖品也出来了只是被挡了

 

原生组件限制：https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html

 

 

 当我用cover-view和cover-image解决层级问题后，实际上虽然按钮看得见，但是点击无效，只有将按钮移到canvas区域外点击才有效。另外，即使点击抽奖成功后，还是没有转动的动画，但是抽奖请求是成功的发了出去并且成功地抽了奖。抽奖成功提示奖品名弹层出现后，canvas就移位了，如下：

使用cover后，只是显示正常：

 

抽奖后，canvas的变化（123232是我随便写的一个按钮，用于在canvas外触发抽奖事件）：

 

 

坑是真的多！

 这是小程序的BUG，还真是无能为力，不过我的项目已经交付了，大家来看另外解决方案的效果：

区别是什么？

1.我把canvas去掉了，背景设置整个圆型DIV的background-color为蓝色

2.利用rotate+wx:for渲染奖品名和分割线，给人一种分区域的感觉，动画依然采用animation

还有什么可以改进的地方？

我把canvas保留下来，日后修复bug后还可以使用，对于整块蓝色，显然不好看，所以可以配合ui设置背景图片，值得注意的是，小程序背景图片只支持base64和网络路径，可能是官方为了缩小项目体积特意为之

 

2018.10.14更新：

小程序解决canvas页面移动问题：

https://blog.csdn.net/seven521m/article/details/81629377

//page里面对应的的json文件
{
    "disableScroll": true
}

 

2019.02.14更新：

近日找到一种终极解决办法：

1.指针被覆盖问题：用canvas绘制指针(图片)即可，覆盖在表盘的上方，先画表盘，再画指针。

2.如何控制表盘转动起来？就是要解决事件监听的问题，要求点到指针才转动，点其他地方不能动，其实很简单，就是监听每次点击，若点击的x,y坐标在绘制指针的范围内，就认为点到指针(实际上看页面上确实点到了)，接着就让转盘开动。

3.转盘如何转动，实际上canvas有ctx.rotate()，这个api就能实现，因此我们就不必用css尝试将canvas转动，后者是行不通的。

4.解决以上三个问题，那么整个大转盘，就可以完全由canvas去实现，并且效果不错！