//蒙版 var canvas_bak = document.getElementById("box"); var winHeight = window.screen.height - window.innerHeight; var vowidth = window.screen.width; var topwinHeightDraw = window.screen.height - window.innerHeight + 30; // 计算title top 头部 var numse = window.screen.height; // 计算title top 头部 连接断开,是否准备重连? if (numse <= 70) { var voheight = window.screen.height - winHeight - 34 - 20 } else { var voheight = window.screen.height - topwinHeightDraw - 20 } // 画笔大小 var resolving; var url = window.location.href; url = url.split('/'); var parameters = GetRequest(); var form = {}; form.clientType = parameters["clientType"]; form.cardIp = parameters["cardIp"]; form.port = parameters["port"]; form.sn = parameters["sn"]; form.username = parameters["username"]; form.userCardId = parameters["userCardId"]; form.ip = parameters["ip"]; form.domainName = parameters["domainName"]; var isWSS = false; var cUrl = isWSS ? "wss://" + form.domainName + "/card?cardIp=" + form.ip : "ws://" + form.domainName + "/card?cardIp=" + form.ip; var wsss,errorTime = 0; doConnect(); function throttle(fn, delay) { let flag = true; errorTime += delay; return () => { if (!flag) return; flag = false; timer = setTimeout(() => { fn(); flag = true; }, delay); }; } function doConnect() { wsss = new WebSocket(cUrl); wsss.binaryType = 'arraybuffer'; wsss.onopen = function () { var pings = { "event": "getScreenStatus" } wsss.send(JSON.stringify(pings)); var bitRate = { "data": { "bitRate": 2243000 }, "event": "bitRate" } wsss.send(ExexuteMove(JSON.stringify(bitRate), form.sn)) }; wsss.onclose = function (evt) { console.log(evt); ws.close(); throttle(doConnect,100); if(errorTime > 1000){ wx.miniProgram.switchTab({ url: '/pages/home/home' }) } }; wsss.onerror = function (evt) { console.log(evt); ws.close(); throttle(doConnect,100); if(errorTime > 1000){ wx.miniProgram.switchTab({ url: '/pages/home/home' }) } // $.confirm({ // title: '提示', // text: '连接断开,是否准备重连?', // onOK: function () { // doConnect(); // }, // onCancel: function () { // wx.miniProgram.switchTab({ // url: '/pages/home/home' // }) // } // }); }; } $('body').on("click", function () { draw_graph('pencil'); }) //剪切板 $(".upload").on("click", function () { var texts = $(this).attr("data-text") if (texts == "uploads") { $(".mainbox").css({ "display": "block" }) $(".sbox").css({ "display": "none" }) } }) //home 控制home $(".botmat1img").on("click", function () { var codes = $(this).attr("data-text") if (codes == "home") { wsss.send(ExexuteKeyBoard(3), form.sn); } else if (codes == "return") { wsss.send(ExexuteKeyBoard(4), form.sn); } else if (codes == "gengduo") { wsss.send(ExexuteKeyBoard(187), form.sn); } }) //高清控制 $(".PictureQuality").on("click", function () { $(this).addClass("avit").siblings().removeClass('avit') var id = $(this).attr("data-id") var bitRate = { "data": { "bitRate": id }, "event": "bitRate" } wsss.send(ExexuteMove(JSON.stringify(bitRate), form.sn)) }) //画图形 var draw_graph = function (graphType, obj) { //把蒙版放于画板上面 $("#container").css("z-index", 30); $("#dedit").css("z-index", 20); var canDraw = false; //鼠标按下获取 开始xy开始画图 var touchstart = function (e) { $('.control-right-img').attr({ "data-id": "2" }) $(".leftmains").css({ "right": "-4rem" }) var touchfor = e.originalEvent.targetTouches; //for 的手指数组 //是否横屏 if (resolving == 0) { var ping; for (var i = 0; i < touchfor.length; i++) { var cawidthXs = touchfor[i].pageY * (1280 / voheight) var caheightYs = 720 - touchfor[i].pageX * (720 / vowidth) ping = { "data": { "action": 0, "count": touchfor.length, "pointerId": i, "x": cawidthXs.toFixed(2), "y": caheightYs.toFixed(2) }, "event": "0" } } wsss.send(ExexuteMove(JSON.stringify(ping), form.sn)) } else { var ping; for (var i = 0; i < touchfor.length; i++) { var cawidthXs = touchfor[i].pageX * (720 / vowidth) var caheightYs = touchfor[i].pageY * (1280 / voheight) ping = { "data": { "action": 0, "count": touchfor.length, "pointerId": i, "x": cawidthXs.toFixed(2), "y": caheightYs.toFixed(2) }, "event": "0" } } wsss.send(ExexuteMove(JSON.stringify(ping), form.sn)); } canDraw = true; }; //鼠标离开 把蒙版canvas的图片生成到canvas中 var touchend = function (e) { var touchfor = e.originalEvent.changedTouches; //for 的手指数组 //是否横屏 morePortionUp if (resolving == 0) { var ping; for (var i = 0; i < touchfor.length; i++) { var cawidthXs = touchfor[i].pageY * (1280 / voheight); var caheightYs = 720 - touchfor[i].pageX * (720 / vowidth); ping = { "data": { "action": 1, "count": touchfor.length, "pointerId": i, "x": cawidthXs.toFixed(2), "y": caheightYs.toFixed(2) }, "event": "1" } } wsss.send(ExexuteMove(JSON.stringify(ping), form.sn)); } else { var ping; for (var i = 0; i < touchfor.length; i++) { var cawidthXs = touchfor[i].pageX * (720 / vowidth); var caheightYs = touchfor[i].pageY * (1280 / voheight); ping = { "data": { "action": 1, "count": touchfor.length, "pointerId": i, "x": cawidthXs.toFixed(2), "y": caheightYs.toFixed(2) }, "event": "1" } } wsss.send(ExexuteMove(JSON.stringify(ping), form.sn)) } canDraw = false; }; //清空层 云手机超出屏幕的开关 var clearContext = function () { canDraw = false; } // 鼠标移动 var touchmove = function (e) { e = e || window.event; var touchfor = e.originalEvent.targetTouches; //for 的手指数组 var ping; //是否横屏 morePortionMove if (resolving == 0) { for (var i = 0; i < touchfor.length; i++) { var cawidthXs = touchfor[i].pageY * (1280 / voheight) var caheightYs = 720 - touchfor[i].pageX * (720 / vowidth) ping = { "data": { "action": 2, "count": touchfor.length, "pointerId": i, "x": cawidthXs.toFixed(2), "y": caheightYs.toFixed(2) }, "event": "2" } } wsss.send(ExexuteMove(JSON.stringify(ping), form.sn)) } else { var ping; for (var i = 0; i < touchfor.length; i++) { var cawidthXs = touchfor[i].pageX * (720 / vowidth); var caheightYs = touchfor[i].pageY * (1280 / voheight); ping = { "data": { "action": 2, "count": touchfor.length, "pointerId": i, "x": cawidthXs.toFixed(2), "y": caheightYs.toFixed(2) }, "event": "2" } } wsss.send(ExexuteMove(JSON.stringify(ping), form.sn)); }; }; //鼠标离开区域以外 除了涂鸦 都清空 var mouseout = function () { if (graphType != 'handwriting') { clearContext(); } } $(canvas_bak).unbind(); $(canvas_bak).bind('touchstart', touchstart); $(canvas_bak).bind('touchmove', touchmove); $(canvas_bak).bind('touchend', touchend); $(canvas_bak).bind('mouseout', mouseout); } // 获取url中"?"符后的字串 function GetRequest() { var url = location.search; var obj = new Object(); if (url.indexOf("?") != -1) { var str = url.substr(1); strs = str.split("&"); for (var i = 0; i < strs.length; i++) { obj[strs[i].split("=")[0]] = (strs[i].split("=")[1]); } } return obj; }