简介

最近做了一个微信小程序控制蓝牙设备，通过小程序中的RGB取色盘，获取当前的RGB颜色，通过蓝牙发送给设备，设备接收到RGB以后，做出相应的调整。

图1：RGB取色盘

在安卓手机上运行正常，能够迅速的相应我的手部滑动位置，并获取到颜色，非常的跟手，但是当运行在苹果手机上时，就会非常的卡顿，速度异常的慢。延时极高，是无法接受的。

我排查过了各种情况，然后我发现wx.canvasGetImageData（）这个API，它是获取can with就是那个画布指定位置的颜色的，然后在安卓上就是可以很快的获取到，但是在苹果上它也延迟非常高可得，可能需要一秒多才能够获取到这个东西，这个应该是属于它微信API的问题；

于是，我在微信的开放社区就是提交这个bug了，一致等待官方给我回复，可是一直没有人回复我。想尽了办法也没有解决这个问题，于是我做十年硬件嵌入式C语言开发的暴脾气上来了，既然微信给的 API不好用，那我就自己写一个函数实现相同的功能就行了啊。

于是乎我就用到了反正切函数arctan（）和勾股定理等，一顿计算，自己编辑出来了一个函数，实现了函数通过触摸点的xy坐标计算获取RGB圆盘的颜色的功能，目前在我的项目中试可用的，可以调整的范围也是挺好的，分享给大家，希望能够帮助大家，同时，有谁有更好的办法大家可以一起交流一下！

注释：

x1,x2 ：圆心点坐标；

y1, y2：触摸点位置坐标；

// XY 坐标 转RGB
function xy2rgb(x1, y1, x2, y2) {// x1=106;// y1=106;// x2=86;// y2=86;var n = x2 - x1,s = y1 - y2;var angle = parseInt(360 * Math.atan(s / n) / (2 * Math.PI));if (angle < 0) {angle = 180 + angle;}var R_angle = 0;var B_angle = 0;var G_angle = 0;if ((n >= 0) & (s > 0)) {R_angle = 180 - angle;B_angle = 180 - (120 - angle);G_angle = Math.abs(180 - (120 + angle));}if ((n < 0) & (s > 0)) {R_angle = 180 - angle;B_angle = 180 - Math.abs(120 - angle);G_angle = Math.abs(180 - (120 + angle));}if ((n < 0) & (s <= 0)) {R_angle = angle;B_angle = 180 - (60 + angle);G_angle = 180 - Math.abs(60 - angle);}if ((n > 0) & (s < 0)) {R_angle = angle;B_angle = Math.abs(180 - (60 + angle));G_angle = 180 - Math.abs(60 - angle);}// console.log("jiaodu",angle);var radial = parseInt(Math.sqrt(n * n + s * s));// console.log("zuobiao666888",n,s);// console.log("banjing",radial,Math.abs(-22));console.log("B_angle",R_angle,B_angle,G_angle,radial);if (R_angle < 90) {var R_colour = parseInt((R_angle / 180) * (1*(x1 - radial) / x1) * 255);} else {var R_colour = parseInt((R_angle / 180) * 1*(radial / x1) * 255);}if (B_angle < 90) {var B_colour = parseInt((B_angle / 180) * (1*(x1 - radial) / x1) * 255);} else {var B_colour = parseInt((B_angle / 180) * 1*(radial / x1) * 255);}if (G_angle < 90) {var G_colour = parseInt((G_angle / 180) * (1*(x1 - radial) / x1) * 255);} else {var G_colour = parseInt((G_angle / 180) * 1*(radial / x1) * 255);}if (R_angle > 170) {R_colour = 255;// B_colour = 0;// G_colour = 0;}if (G_angle > 170) {G_colour = 255;// R_colour = 0;// B_colour = 0;}if (B_angle > 170) {B_colour = 255;// R_colour = 0;// G_colour = 0;}if(R_colour >255){R_colour = 255}if(R_colour <0){R_colour = 0}if(B_colour >255){B_colour = 255}if(B_colour <0){B_colour = 0}if(G_colour >255){G_colour = 255}if(G_colour <0){G_colour = 0}// console.log("rgb666",R_colour,B_colour,G_colour);const RGB_value = [R_colour,G_colour,B_colour]return RGB_value
}

微信小程序中js触摸点坐标获取（这部分比较简单，是常规操作）

if (e.touches) {let x = e.changedTouches[0].x;let y = e.changedTouches[0].y;if (e.type !== 'touchend') {x = e.touches[0].x;y = e.touches[0].y;}let ban=(wx.getSystemInfoSync().windowWidth*0.66/2).toFixed(2);console.log("let banlet ban 888",ban)const res = util.xy2rgb(ban, ban, x, y)if (res[0] == 0 && res[1] == 0 && res[2] == 0) {return}
}

希望能够帮助大家，不要再掉进这个坑里。

解决小程序-wx.canvasGetImageData（）-RGB取色盘苹果手机获取颜色慢问题相关推荐

解决微信小程序 wx.request 方法不支持 Promise 并发数问题
wx-promise-request 是微信小程序 wx.request 方法的不支持 Promise 和并发数问题的解决方案.如果只需要解决并发数问题,可以使用wx-queue-request.js ...
小程序wx.getUserInfo获取用户信息方案介绍
问题模块框架类型问题类型 API/组件名称终端类型操作系统微信版本基础库版本 API和组件 - - - - 背景小程序一个比较重要的能力就是获取用户信息,也就是使用 wx.g ...
微信小程序 wx.setstoragesync和wx.setstorage 区别
相同点: 微信小程序 wx.setstoragesync和wx.setstorage都是能把值保存在微信小程序缓存中,类似于浏览器的localstorage概念区别: wx.setStorage是异 ...
企业微信小程序wx.qy.login 的调用调试踩坑
企业微信小程序wx.qy.login 的调用调试踩坑起步在企业微信的开发过程中有很多坑,一切以企业微信开发文档为准. 近期我公司项目需要我联调开发企业微信小程序,以前没开发过,所以一切只能跟着企业 ...
微信小程序坑点杂谈（五）1000比200小？光速解决小程序数值大小判断错误的问题
微信小程序坑点杂谈(五)光速解决小程序数值大小判断错误的问题一.写在开头本人只是一枚小小的新手开发者,所提的问题和解答很难超过个人水平,如果对你有帮助,那就太好了! 二.发现问题我个人前些天写一 ...
小程序wx.requestPayment报错/无响应信息梳理
大风起兮云飞扬,安得猛士兮走四方,BUG,任何时候都要改,不改不行,你想想,你自己一个人,下了班,吃着火锅还唱着歌,突然支付就不能用了! 本文整理了关于微信小程序wx.requestPayment的报 ...
解决小程序开发：未找到 app.json 中的定义的 pages “pages/index/index“ 对应的 WXML 文件
解决小程序开发:未找到 app.json 中的定义的 pages "pages/index/index" 对应的 WXML 文件 (亲测,以解决)如果节约了你的宝贵时间,辛苦点个赞 ...
微信小程序数据库交互 php,微信小程序wx.request实现后台数据交互功能分析
本文主要介绍微信小程序wx.request实现后台数据交互功能,分析微信小程序wx.request在后台数据交互过程中遇到的问题与相关的解决方法,需要的朋友可以参考下记录微信小程序wx.reques ...
完美解决小程序一维数组循环渲染列表不够用问题
完美解决小程序一维数组循环渲染列表不够用问题参考文章: (1)完美解决小程序一维数组循环渲染列表不够用问题 (2)https://www.cnblogs.com/jessical626/p/6363 ...

解决小程序-wx.canvasGetImageData（）-RGB取色盘苹果手机获取颜色慢问题

简介

解决小程序-wx.canvasGetImageData（）-RGB取色盘苹果手机获取颜色慢问题相关推荐

最新文章

热门文章