WXdraw.js 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306
  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. form.clientType = parameters["clientType"];
  20. form.cardIp = parameters["cardIp"];
  21. form.port = parameters["port"];
  22. form.sn = parameters["sn"];
  23. form.username = parameters["username"];
  24. form.userCardId = parameters["userCardId"];
  25. form.ip = parameters["ip"];
  26. form.domainName = parameters["domainName"];
  27. var isWSS = false;
  28. var cUrl = isWSS ? "wss://" + form.domainName + "/card?cardIp=" + form.ip : "ws://" + form.domainName + "/card?cardIp=" + form.ip;
  29. var wsss,errorTime = 0;
  30. doConnect();
  31. function throttle(fn, delay) {
  32. let flag = true;
  33. errorTime += delay;
  34. return () => {
  35. if (!flag) return;
  36. flag = false;
  37. timer = setTimeout(() => {
  38. fn();
  39. flag = true;
  40. }, delay);
  41. };
  42. }
  43. function doConnect() {
  44. wsss = new WebSocket(cUrl);
  45. wsss.binaryType = 'arraybuffer';
  46. wsss.onopen = function () {
  47. var pings = {
  48. "event": "getScreenStatus"
  49. }
  50. wsss.send(JSON.stringify(pings));
  51. var bitRate = {
  52. "data": {
  53. "bitRate": 1243000
  54. },
  55. "event": "bitRate"
  56. }
  57. wsss.send(ExexuteMove(JSON.stringify(bitRate), form.sn))
  58. };
  59. wsss.onclose = function (evt) {
  60. console.log(evt);
  61. ws.close();
  62. throttle(doConnect,500);
  63. if(errorTime > 5000){
  64. wx.miniProgram.switchTab({
  65. url: '/pages/home/home'
  66. })
  67. }
  68. };
  69. wsss.onerror = function (evt) {
  70. console.log(evt);
  71. ws.close();
  72. throttle(doConnect,500);
  73. if(errorTime > 5000){
  74. wx.miniProgram.switchTab({
  75. url: '/pages/home/home'
  76. })
  77. }
  78. };
  79. }
  80. $('body').on("click", function () {
  81. draw_graph('pencil');
  82. })
  83. //剪切板
  84. $(".upload").on("click", function () {
  85. var texts = $(this).attr("data-text")
  86. if (texts == "uploads") {
  87. $(".mainbox").css({
  88. "display": "block"
  89. })
  90. $(".sbox").css({
  91. "display": "none"
  92. })
  93. }
  94. })
  95. //home 控制home
  96. $(".botmat1img").on("click", function () {
  97. var codes = $(this).attr("data-text")
  98. if (codes == "home") {
  99. wsss.send(ExexuteKeyBoard(3), form.sn);
  100. } else if (codes == "return") {
  101. wsss.send(ExexuteKeyBoard(4), form.sn);
  102. } else if (codes == "gengduo") {
  103. wsss.send(ExexuteKeyBoard(187), form.sn);
  104. }
  105. })
  106. //高清控制
  107. $(".PictureQuality").on("click", function () {
  108. $(this).addClass("avit").siblings().removeClass('avit')
  109. var id = $(this).attr("data-id")
  110. var bitRate = {
  111. "data": {
  112. "bitRate": id
  113. },
  114. "event": "bitRate"
  115. }
  116. wsss.send(ExexuteMove(JSON.stringify(bitRate), form.sn))
  117. })
  118. //画图形
  119. var draw_graph = function (graphType, obj) {
  120. //把蒙版放于画板上面
  121. $("#container").css("z-index", 30);
  122. $("#dedit").css("z-index", 20);
  123. var canDraw = false;
  124. //鼠标按下获取 开始xy开始画图
  125. var touchstart = function (e) {
  126. $('.control-right-img').attr({
  127. "data-id": "2"
  128. })
  129. $(".leftmains").css({
  130. "right": "-4rem"
  131. })
  132. var touchfor = e.originalEvent.targetTouches; //for 的手指数组
  133. //是否横屏
  134. if (resolving == 0) {
  135. var ping;
  136. for (var i = 0; i < touchfor.length; i++) {
  137. var cawidthXs = touchfor[i].pageY * (1280 / voheight)
  138. var caheightYs = 720 - touchfor[i].pageX * (720 / vowidth)
  139. ping = {
  140. "data": {
  141. "action": 0,
  142. "count": touchfor.length,
  143. "pointerId": i,
  144. "x": cawidthXs.toFixed(2),
  145. "y": caheightYs.toFixed(2)
  146. },
  147. "event": "0"
  148. }
  149. }
  150. wsss.send(ExexuteMove(JSON.stringify(ping), form.sn))
  151. } else {
  152. console.log('横屏');
  153. var ping;
  154. for (var i = 0; i < touchfor.length; i++) {
  155. var cawidthXs = touchfor[i].pageX * (720 / vowidth)
  156. var caheightYs = touchfor[i].pageY * (1280 / voheight)
  157. ping = {
  158. "data": {
  159. "action": 0,
  160. "count": touchfor.length,
  161. "pointerId": i,
  162. "x": cawidthXs.toFixed(2),
  163. "y": caheightYs.toFixed(2)
  164. },
  165. "event": "0"
  166. }
  167. }
  168. wsss.send(ExexuteMove(JSON.stringify(ping), form.sn));
  169. }
  170. canDraw = true;
  171. };
  172. //鼠标离开 把蒙版canvas的图片生成到canvas中
  173. var touchend = function (e) {
  174. var touchfor = e.originalEvent.changedTouches; //for 的手指数组
  175. //是否横屏 morePortionUp
  176. if (resolving == 0) {
  177. var ping;
  178. for (var i = 0; i < touchfor.length; i++) {
  179. var cawidthXs = touchfor[i].pageY * (1280 / voheight);
  180. var caheightYs = 720 - touchfor[i].pageX * (720 / vowidth);
  181. ping = {
  182. "data": {
  183. "action": 1,
  184. "count": touchfor.length,
  185. "pointerId": i,
  186. "x": cawidthXs.toFixed(2),
  187. "y": caheightYs.toFixed(2)
  188. },
  189. "event": "1"
  190. }
  191. }
  192. wsss.send(ExexuteMove(JSON.stringify(ping), form.sn));
  193. } else {
  194. var ping;
  195. for (var i = 0; i < touchfor.length; i++) {
  196. var cawidthXs = touchfor[i].pageX * (720 / vowidth);
  197. var caheightYs = touchfor[i].pageY * (1280 / voheight);
  198. ping = {
  199. "data": {
  200. "action": 1,
  201. "count": touchfor.length,
  202. "pointerId": i,
  203. "x": cawidthXs.toFixed(2),
  204. "y": caheightYs.toFixed(2)
  205. },
  206. "event": "1"
  207. }
  208. }
  209. wsss.send(ExexuteMove(JSON.stringify(ping), form.sn))
  210. }
  211. canDraw = false;
  212. };
  213. //清空层 云手机超出屏幕的开关
  214. var clearContext = function () {
  215. canDraw = false;
  216. }
  217. // 鼠标移动
  218. var touchmove = function (e) {
  219. e = e || window.event;
  220. var touchfor = e.originalEvent.targetTouches; //for 的手指数组
  221. var ping;
  222. //是否横屏 morePortionMove
  223. if (resolving == 0) {
  224. for (var i = 0; i < touchfor.length; i++) {
  225. var cawidthXs = touchfor[i].pageY * (1280 / voheight)
  226. var caheightYs = 720 - touchfor[i].pageX * (720 / vowidth)
  227. ping = {
  228. "data": {
  229. "action": 2,
  230. "count": touchfor.length,
  231. "pointerId": i,
  232. "x": cawidthXs.toFixed(2),
  233. "y": caheightYs.toFixed(2)
  234. },
  235. "event": "2"
  236. }
  237. }
  238. wsss.send(ExexuteMove(JSON.stringify(ping), form.sn))
  239. } else {
  240. var ping;
  241. for (var i = 0; i < touchfor.length; i++) {
  242. var cawidthXs = touchfor[i].pageX * (720 / vowidth);
  243. var caheightYs = touchfor[i].pageY * (1280 / voheight);
  244. ping = {
  245. "data": {
  246. "action": 2,
  247. "count": touchfor.length,
  248. "pointerId": i,
  249. "x": cawidthXs.toFixed(2),
  250. "y": caheightYs.toFixed(2)
  251. },
  252. "event": "2"
  253. }
  254. }
  255. wsss.send(ExexuteMove(JSON.stringify(ping), form.sn));
  256. };
  257. };
  258. //鼠标离开区域以外 除了涂鸦 都清空
  259. var mouseout = function () {
  260. if (graphType != 'handwriting') {
  261. clearContext();
  262. }
  263. }
  264. $(canvas_bak).unbind();
  265. $(canvas_bak).bind('touchstart', touchstart);
  266. $(canvas_bak).bind('touchmove', touchmove);
  267. $(canvas_bak).bind('touchend', touchend);
  268. $(canvas_bak).bind('mouseout', mouseout);
  269. }
  270. // 获取url中"?"符后的字串
  271. function GetRequest() {
  272. var url = location.search;
  273. var obj = new Object();
  274. if (url.indexOf("?") != -1) {
  275. var str = url.substr(1);
  276. strs = str.split("&");
  277. for (var i = 0; i < strs.length; i++) {
  278. obj[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
  279. }
  280. }
  281. return obj;
  282. }