WXdraw.js 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
  1. //蒙版
  2. var canvas_bak = document.getElementById("box");
  3. var winHeight = window.screen.height - window.innerHeight;
  4. var vowidth = window.screen.width;
  5. var topwinHeightDraw = window.screen.height - window.innerHeight + 30; // 计算title top 头部
  6. var numse = window.screen.height;
  7. // 计算title top 头部 连接断开,是否准备重连?
  8. if (numse <= 70) {
  9. var voheight = window.screen.height - winHeight - 34 - 20
  10. } else {
  11. var voheight = window.screen.height - topwinHeightDraw - 20
  12. }
  13. // 画笔大小
  14. var resolving = 1; // 1: 竖屏;2:横屏;
  15. var url = window.location.href;
  16. url = url.split('/');
  17. var parameters = GetRequest();
  18. var form = {};
  19. var cardToken = parameters["cardToken"];
  20. cardToken = cardToken && cardToken.replace(/@/g,"=");
  21. form.cardIp = parameters["cardIp"];
  22. form.port = parameters["port"];
  23. form.username = parameters["username"];
  24. form.userCardId = parameters["userCardId"];
  25. form.ip = parameters["ip"];
  26. form.domainName = parameters["domainName"];
  27. var isWSS = true;
  28. var cUrl = isWSS ? "wss://" + form.domainName + "?cardIp=" + form.ip + "&token=" + cardToken : "ws://" + form.domainName + "?cardIp=" + form.ip + "&token=" + cardToken;
  29. // var cUrl = "wss://192.168.31.198/businessChannel?cardIp=192.168.20.53&token=LDAz32tutqS9wQqi0WlmvJ68/Is83cX+kavJQij1IMRvewgZ1dLvviFZqd4b8gcaR1eLztR/ViRLyyAVvZO7GA==";
  30. var wsss,errorTime = 0;
  31. doConnect();
  32. function throttle(fn, delay) {
  33. var flag = true;
  34. errorTime += delay;
  35. return () => {
  36. if (!flag) return;
  37. flag = false;
  38. timer = setTimeout(() => {
  39. fn();
  40. flag = true;
  41. }, delay);
  42. };
  43. }
  44. function doConnect() {
  45. wsss = new WebSocket(cUrl);
  46. wsss.binaryType = 'arraybuffer';
  47. wsss.onopen = function () {
  48. // 获取虚拟场景状态
  49. var pings = { "type": "getVsStatus" }
  50. wsss.send(JSON.stringify(pings));
  51. var bitRate = {
  52. "data": {
  53. "bitRate": 1243000
  54. },
  55. "type": "bitRate"
  56. }
  57. wsss.send(JSON.stringify(bitRate))
  58. };
  59. wsss.onerror = function (evt) {
  60. wsss.close();
  61. throttle(doConnect,100);
  62. if(errorTime > 1000){
  63. wx.miniProgram.switchTab({
  64. url: '/pages/home/home'
  65. })
  66. }
  67. };
  68. }
  69. $('body').on("click", function () {
  70. draw_graph('pencil');
  71. })
  72. //剪切板
  73. $(".upload").on("click", function () {
  74. var texts = $(this).attr("data-text")
  75. if (texts == "uploads") {
  76. $(".mainbox").css({
  77. "display": "block"
  78. })
  79. $(".sbox").css({
  80. "display": "none"
  81. })
  82. }
  83. })
  84. //home 控制home
  85. $(".botmat1img").on("click", function () {
  86. var codes = $(this).attr("data-text")
  87. if (codes == "home") {
  88. wsss.send(ExexuteKeyBoard(3));
  89. } else if (codes == "return") {
  90. wsss.send(ExexuteKeyBoard(4));
  91. } else if (codes == "gengduo") {
  92. wsss.send(ExexuteKeyBoard(187));
  93. }
  94. })
  95. //高清控制
  96. $(".PictureQuality").on("click", function () {
  97. $(this).addClass("avit").siblings().removeClass('avit')
  98. var id = $(this).attr("data-id")
  99. var bitRate = {
  100. "data": {
  101. "bitRate": id
  102. },
  103. "type": "bitRate"
  104. }
  105. wsss.send(JSON.stringify(bitRate))
  106. })
  107. var ongoingTouches = [];
  108. //画图形
  109. var draw_graph = function (graphType, obj) {
  110. //把蒙版放于画板上面
  111. $("#container").css("z-index", 30);
  112. $("#dedit").css("z-index", 20);
  113. var canDraw = false;
  114. //鼠标按下获取 开始xy开始画图
  115. var touchstart = function (e) {
  116. $('.control-right-img').attr({
  117. "data-id": "2"
  118. })
  119. $(".leftmains").css({
  120. "right": "-4rem"
  121. })
  122. var touchfor = e.originalEvent.changedTouches[0]; //for 的手指数组
  123. ongoingTouches.push(touchfor);
  124. var acrossWidthX = touchfor.pageY * (1280 / voheight);
  125. var acrossHeightY = 720 - touchfor.pageX * (720 / vowidth);
  126. var verticalWidthX = touchfor.pageX * (720 / vowidth);
  127. var verticalHeightY = touchfor.pageY * (1280 / voheight);
  128. //是否横屏
  129. var ping = resolving == 0 ?
  130. {"data":{"action": 0, "count": ongoingTouches.length, "id": touchfor.identifier, "x": acrossWidthX.toFixed(2), "y": acrossHeightY.toFixed(2)},"type": "event"} :
  131. {"data":{"action": 0, "count": ongoingTouches.length, "id": touchfor.identifier, "x": verticalWidthX.toFixed(2), "y": verticalHeightY.toFixed(2)},"type": "event"};
  132. wsss.send(JSON.stringify(ping));
  133. canDraw = true;
  134. };
  135. //鼠标离开 把蒙版canvas的图片生成到canvas中
  136. var touchend = function (e) {
  137. var touchfor = e.originalEvent.changedTouches[0]; //for 的手指数组
  138. var acrossWidthX = touchfor.pageY * (1280 / voheight);
  139. var acrossHeightY = 720 - touchfor.pageX * (720 / vowidth);
  140. var verticalWidthX = touchfor.pageX * (720 / vowidth);
  141. var verticalHeightY = touchfor.pageY * (1280 / voheight);
  142. //是否横屏
  143. var ping = resolving == 0 ?
  144. {"data":{"action": 1, "count": ongoingTouches.length, "id": touchfor.identifier, "x": acrossWidthX.toFixed(2), "y": acrossHeightY.toFixed(2)},"type": "event"} :
  145. {"data":{"action": 1, "count": ongoingTouches.length, "id": touchfor.identifier, "x": verticalWidthX.toFixed(2), "y": verticalHeightY.toFixed(2)},"type": "event"};
  146. wsss.send(JSON.stringify(ping));
  147. ongoingTouches.splice(touchfor.identifier, 1);
  148. canDraw = false;
  149. };
  150. //清空层 云手机超出屏幕的开关
  151. var clearContext = function () {
  152. canDraw = false;
  153. }
  154. // 鼠标移动
  155. var touchmove = function (e) {
  156. e = e || window.event;
  157. var touchfor = e.originalEvent.changedTouches[0]; //for 的手指数组
  158. var acrossWidthX = touchfor.pageY * (1280 / voheight);
  159. var acrossHeightY = 720 - touchfor.pageX * (720 / vowidth);
  160. var verticalWidthX = touchfor.pageX * (720 / vowidth);
  161. var verticalHeightY = touchfor.pageY * (1280 / voheight);
  162. var ping = resolving == 0 ?
  163. {"data":{"action": 2, "count": ongoingTouches.length, "id": touchfor.identifier, "x": acrossWidthX.toFixed(2), "y": acrossHeightY.toFixed(2)},"type": "event"} :
  164. {"data":{"action": 2, "count": ongoingTouches.length, "id": touchfor.identifier, "x": verticalWidthX.toFixed(2), "y": verticalHeightY.toFixed(2)},"type": "event"};
  165. wsss.send(JSON.stringify(ping));
  166. };
  167. //鼠标离开区域以外 除了涂鸦 都清空
  168. var mouseout = function () {
  169. if (graphType != 'handwriting') {
  170. clearContext();
  171. }
  172. }
  173. $(canvas_bak).unbind();
  174. $(canvas_bak).bind('touchstart', touchstart);
  175. $(canvas_bak).bind('touchmove', touchmove);
  176. $(canvas_bak).bind('touchend', touchend);
  177. $(canvas_bak).bind('mouseout', mouseout);
  178. }
  179. // 获取url中"?"符后的字串
  180. function GetRequest() {
  181. var url = location.search;
  182. var obj = new Object();
  183. if (url.indexOf("?") != -1) {
  184. var str = url.substr(1);
  185. strs = str.split("&");
  186. for (var i = 0; i < strs.length; i++) {
  187. obj[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
  188. }
  189. }
  190. return obj;
  191. }