一 前言

    时光如白驹过隙，世事如白云苍狗，不知不觉中，2020年已经度过了一半了，很多时候，我在反思自己，这几个月我究竟在项目中学到了什么？又如何去总结形成自己的知识体系？正是自己所考虑的，正如前辈所说：不仅为公司谋发展，还要提高个人竞争力；

    最近我没什么新鲜文章出炉，很多时候在反思一些未来的方向，需要不断改正来适应社会的发展。

    怎么搞都是 Wi-Fi 模块物联网领域，在接触 ble mesh协议，还是比较吃力的，好吧，慢慢来；

二 关于颜色采集器

    在2017年时候，我写过一篇文章关于在 Android 上实现七彩虹控制的，其原理还是比较简单，大家可以到这文章浏览下：

• Android自定义View之七色环颜色采集器: 续我未完的大学梦

    然后，微信小程序就逐渐慢慢庞大起来了，于是乎，我在考虑如何在跨平台上来做这些好看的界面，特别是七彩环控制，特别受欢迎；

三 七彩控件

    总结这几年实现的七彩控制的经验，给各位带来几个好看的实用的控件！

1. 微信小程序圆环七彩控件

• 【推荐指数 ★★★★★】

    先看看效果：

    原理就是画2个圆，用2个画布即可实现，具体的画法代码如下：

<view class="color-picker-view">
  <canvas id="colorPicker" style="width: {{raduis}}rpx;height: {{raduis}}rpx;" canvas-id="colorPicker" class="color-picker" />
  <canvas canvas-id="colorPickerSlider" class="color-picker-slider" style="width: {{raduis}}rpx;height: {{raduis}}rpx;z-index:1;background:rgba(255,255,255,0);" bindtouchstart="onSlide" bindtouchmove="onSlide" bindtouchend="onSlide" />
</view>

    设置点击触摸事件：

let colorPickerCtx = wx.createCanvasContext('colorPicker');
    colorPickerCtx.fillStyle = 'rgb(255, 255, 255)';
    sliderCtx = wx.createCanvasContext('colorPickerSlider');
    this.MqttConnect()
    let isInit = true;
    wx.createSelectorQuery().select('#colorPicker').boundingClientRect(function(rect) {
      _this.setData({
        valueWidthOrHerght: rect.width,
      })
      if(isInit){
        colorPickerCtx.fillRect(0, 0, rect.width, rect.height);
        util.drawRing(colorPickerCtx, rect.width, rect.height);
        // 设置默认位置
        util.drawSlider(sliderCtx, rect.width, rect.height, 1.0);
        isInit = false;
      }
      _this.setData({
        pickColor: JSON.stringify({
          red: 255,
          green: 0,
          blue: 0
        })
      })
    }).exec();

     同步下状态，比如设置为绿色：

let h = util.rgb2hsl(0, 255, 0);
    util.drawSlider(sliderCtx, _this.data.valueWidthOrHerght, _this.data.valueWidthOrHerght, h[0]);
    this.setData({
      pickColor: JSON.stringify({
        red: 0,
        green: 255,
        blue: 0
      })
    })

    参考的是阿里开源的支付宝小程序七彩灯程序，二次移植并开发实现在微信小程序上，目前已经实现了圆环拖动获取颜色，以及根据指定的颜色来跳到指定的位置；

    代码开源，我已经放在了GitHub上了： https://github.com/xuhongv/WCMiniColorPicker

2. 微信小程序七彩控件

• 【 推荐指数 ★★★】

    先看看效果：

小程序拾色器（颜色选择器）组件,以rgb为数据格式

对比:

• we-color-picker
  需注意组件定位，操作不跟手不流畅,配置复杂。其定位会撑开原有页面，体验不佳。滑动距离按像素区分(固定)，需考虑设备分辨率，不利于多端。
• PapaerPen
  利用原有slider组件实现滑动选取，不限于设备分辨率。但需三次操作。

特性:

    本组件利用官方提供的slider实现选择色相，movable-view选择饱和度和明度，由于是官方基础组件，操作顺畅。在滑动区域的设定上，使用占比来影响色值变化，无需考虑rpx转换。在操作流程上，限于手机操作区域，不能使用Popover，使用底部拉起弹窗，不影响原有页面，重点突出。在操作预览上，由于弹窗遮罩不可避免无法实时预览，采用色相滑块的颜色来实现预览。同时考虑了iphone-x的安全区域问题。

    安装和使用具体的方法参考：GitHub链接

    下面贴下我的应用场景，使用此控件+远程控制设备，是非常好玩的；

3. 微信公众号七彩圆环控件

• 【 <font color=red>推荐指数 ★★★★★</font>】
• 这个效果我个人感觉是最好的，富有弹性，哈哈！

    上面给大家分享了我最近用的2个微信小程序上实现的采集颜色控件，下面给大家推荐下微信公众号上的，其实微信公众号开发就是一个网页来的，所以一般的移动端H5适配都可以轻松集成；

    具体的使用方法，访问：radial-color-picker/vue-color-picker ，集成失败的，可以联系我呢！

    下面是集成到我的公众号之后的效果：