评论

做了一个颜色选择器

做个小东西好费劲

edit at 11/12 代码传到了:https://github.com/eclipseglory/zasi-components , DEMO演示在文章结尾


小程序没有提供color-picker类似的组件,只能自己做。

可传统的RGB颜色选择器,真的腻了,而且在手机上也不是很操作,就跑网上搜了一圈,发现有一种圆环形的(基于HSV)我很喜欢:



我自诩对canvas2d和webgl很熟悉,做个这玩意儿很轻松,开始做!没想到痛苦开始了。

从上周5开始,一共做了三个版本:
1.纯canvas版本
2.canvas+组件版本
3.纯组件版本

纯canvas版本

这个版本做了整整一天!

由于canvas绘制性能问题,特别是因为没有requestAnimationFrame可以调用,别说在真机上测试特别不流畅,就是在模拟器上也小卡小卡的。而且,在纯的canvas进行触摸定位等事件响应处理,计算起来太麻烦,bug不断,只能放弃了。

混合版本

因为wxs模块是提供requestAnimationFrame接口的,所以我就想,使用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,要使用的话,复制里面的组件出来用就好。

有些代码我混淆过,但不耽误使用。

有问题找我

最后一次编辑于  11-12  
点赞 12
收藏
评论

6 个评论

  • am1n0
    am1n0
    11-12

    建议使用 conic gradient: https://developer.mozilla.org/en-US/docs/Web/CSS/conic-gradient

    touchmove 事件可以加在整个容器里面,根据触发 touchdown 事件的元素以判断是调色调,亮度还是透明度等。

    11-12
    赞同 1
    回复 1
    • 老脸
      老脸
      11-12
      感谢你的建议
      11-12
      回复
  • A-聪
    A-聪
    11-20

    挺好的模块。已经用了。


    11-20
    赞同
    回复
  • Dynamic。
    Dynamic。
    11-12

    很棒!支持!

    11-12
    赞同
    回复
  • x_Qiang
    x_Qiang
    11-12

    膜拜

    11-12
    赞同
    回复
  • Hanks
    Hanks
    11-12

    真棒

    11-12
    赞同
    回复
  • am1n0
    am1n0
    11-12

    尽管 conic gradients 可以做出颜色非常精确的渐变,他仅受到最近的 WebKit/Chromium 内核支持。

    11-12
    赞同
    回复