需求:現在有一個小程序抽獎頁面如下,此類抽獎方式為大轉盤(另一種是九宮格)
思路:由服務的獲取:可抽獎次數和獎品列表,利用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去實現,並且效果不錯!