评论

分享一下在微信公众号和小程序上实现的几个颜色采集器;

分享一下我在微信公众号和小程序上实现的几个颜色采集器,轻松集成到您项目实现调光

一 前言

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

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

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

二 关于颜色采集器

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

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

三 七彩控件

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

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 ,集成失败的,可以联系我呢!

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

点赞 0
收藏
评论

1 个评论

  • xy
    xy
    06-05

    赞一个

    06-05
    赞同
    回复
登录 后发表内容