用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

湖人vs爵士季后赛 www.nbgeh.club 531

主題

910

帖子

1萬

積分

管理員

Rank: 9Rank: 9Rank: 9

積分
12309
2019-11-13 16:43:38 Rolan 管理員 樓主 0753
湖人vs爵士季后赛沒有提供color-picker類似的組件,只能自己做??紗車腞GB顏色選擇器,真的膩了,而且在手機上也不是很操作,就跑網上搜了一圈,發現有一種圓環形的(基于HSV)我很喜歡:
純canvas版本
這個版本做了整整一天!
由于canvas繪制性能問題,特別是因為沒有requestAnimationFrame可以調用,別說在真機上測試特別不流暢,就是在模擬器上也小卡小卡的。而且,在純的canvas進行觸摸定位等事件響應處理,計算起來太麻煩,bug不斷,只能放棄了。

混合版本
因為wxs??槭翹峁﹔equestAnimationFrame接口的,所以我就想,使用canvas作為底部顏色環,上面就直接用view作為指針,這樣,事件觸發和處理比起純canvas要簡單得多,而且還能利用rAF回調頁面接口去繪制其他canvas。
的確,我的想法得到了證實,這個混合版本比起第一個要流暢得多!
可就要完工的時候,我卻發現,在真機上,cover-view的鼠標事件有很大問題,坐標值飄忽不定,也就是說拖動指針會發生鬼畜般的抖動!加上我不知道怎么debug到wxs??櫓?,于是跟個sb一樣fix,找了半天也沒找到問題在哪兒,直到我搜索時,返現有人也遇到和我一樣的問題,我才安心了:這是小程序的問題。
動手改!既然cover-view有不行,那就不用它。
實際上canvas在該組件中的作用無非就是繪制一個圓環而已,如果我利用離屏canvas事先畫好,然后保存成圖片,再用image加載它,這樣就可以避免使用canvas來顯示圓環了,也就可以不用cover-view放到其頂部!
想法是好的,可是到了真機上,繪制保存出來的圖片時好時壞:


只能放棄,又耽誤我一天。

無canvas版本
剛才說了,canvas在該組件中的作用,僅僅是繪制一個顏色環而已,除此之外真沒什么用。
那我就用css模擬一個類似圓環就好了,精確到每一度一個顏色一點意義沒有。
所以就利用css的background-image屬性,做了4個四分之一圓弧,然后拼在一起,得到了一個彩色原版,再用一個小的view遮擋,讓它們只露出一部分,圓環就做好了。
之前的代碼都不用改,直接用新作的圓環views替換canvas的標簽即可。主體框架和功能,不到一天就完成了,不得不說,比起純的canvas繪制,要方便太多太多。

這是截圖:
代碼片段
這里是 演示DEMO,要使用的話,復制里面的組件出來用就好。
下載: zasi-components-master.zip (147.9 KB, 下載次數: 2)


分享至 : QQ空間
1 人收藏
有問題請在本站內搜索相應關鍵詞,假如無法解決請在綜合交流區內發帖咨詢,發帖時請提供詳細的問題描述、相關圖片及代碼。
還可以加QQ交流群咨詢:536592077。
發新帖
您需要登錄后才可以回帖 登錄 | 立即注冊
宁波七百搭麻将下截 开港货店赚钱 买设备赚钱 865棋牌官方版安卓版下载 美容赚钱还是美体 老公出轨为了赚钱 有快乐赛车吗 重庆百变王牌高手技巧 租格子铺能抓赚钱吗 彩乐网安卓 酷彩娱乐安卓 时时彩开奖结果链接 北京pk10直播网 排列三千万大奖 七乐彩规则及玩法奖金 15年零成本赚钱快的买卖