|
@@ -1,15 +1,15 @@
|
|
|
// 蒙版
|
|
|
-var canvas_bak = document.getElementById("box");;
|
|
|
+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 // -winHeight
|
|
|
+var numse = window.screen.height; // -winHeight
|
|
|
//计算title top 头部
|
|
|
if (numse <= 70) {
|
|
|
- var voheight = window.screen.height - winHeight - 34 - 20
|
|
|
+ var voheight = window.screen.height - winHeight - 34 - 20;
|
|
|
} else {
|
|
|
- var voheight = window.screen.height - topwinHeightDraw - 20
|
|
|
+ var voheight = window.screen.height - topwinHeightDraw - 20;
|
|
|
}
|
|
|
|
|
|
//画笔大小
|
|
@@ -20,18 +20,24 @@ url = url.split('/');
|
|
|
var parameters = GetRequest();
|
|
|
|
|
|
var videoWidth, videoHeight;
|
|
|
-var isControl = true; // 是否是观看模式
|
|
|
+var isControl = false; // 是否是观看模式
|
|
|
+changIsControl(true);
|
|
|
var isAuth = parameters['authPhone']; // 是否是获取的云手机
|
|
|
var wsss;
|
|
|
var errorTime = 0;
|
|
|
var first = true;
|
|
|
+function changIsControl(value) {
|
|
|
+ isControl = value;
|
|
|
+ // if(){}
|
|
|
+ $('#open-set-phone-size-dialog-btn').attr('hidden', !value);
|
|
|
+}
|
|
|
|
|
|
function throttle(fn, delay) {
|
|
|
var flag = true;
|
|
|
- errorTime += delay;
|
|
|
return () => {
|
|
|
if (!flag) return;
|
|
|
flag = false;
|
|
|
+ errorTime += delay;
|
|
|
timer = setTimeout(() => {
|
|
|
fn();
|
|
|
flag = true;
|
|
@@ -39,80 +45,196 @@ function throttle(fn, delay) {
|
|
|
};
|
|
|
}
|
|
|
|
|
|
+const throttleDoConnectDirectives = throttle(() => {
|
|
|
+ doConnectDirectives();
|
|
|
+}, 100);
|
|
|
+
|
|
|
function doConnectDirectives() {
|
|
|
- videoWidth = Number(resolvingPower) ? Number(resolvingPower) : 720
|
|
|
- videoHeight = videoWidth === 720 ? 1280 : 1920
|
|
|
+ videoWidth = Number(resolvingPower) ? Number(resolvingPower) : 720;
|
|
|
+ videoHeight = videoWidth === 720 ? 1280 : 1920;
|
|
|
wsss = new WebSocket(cUrl);
|
|
|
wsss.binaryType = 'arraybuffer';
|
|
|
|
|
|
wsss.onopen = function () {
|
|
|
// 获取虚拟场景状态
|
|
|
- var pings = { "type": "getVsStatus" }
|
|
|
+ errorTime = 0;
|
|
|
+ var pings = { type: 'getVsStatus' };
|
|
|
wsss.send(JSON.stringify(pings));
|
|
|
var bitRate = {
|
|
|
- "data": {
|
|
|
- "bitRate": 1243000
|
|
|
+ data: {
|
|
|
+ bitRate: 1243000,
|
|
|
},
|
|
|
- "type": "bitRate"
|
|
|
- }
|
|
|
+ type: 'bitRate',
|
|
|
+ };
|
|
|
wsss.send(JSON.stringify(bitRate));
|
|
|
// 进入发起询问
|
|
|
var pings2 = {
|
|
|
- "type": "forwardMsg",
|
|
|
- "data": {
|
|
|
- "code": "3000",
|
|
|
- "desc": "询问是否有在控制" // 可选
|
|
|
- }
|
|
|
- }
|
|
|
+ type: 'forwardMsg',
|
|
|
+ data: {
|
|
|
+ code: '3000',
|
|
|
+ username,
|
|
|
+ desc: '询问是否有在控制', // 可选
|
|
|
+ },
|
|
|
+ };
|
|
|
wsss.send(JSON.stringify(pings2));
|
|
|
+
|
|
|
+ wsss.send(
|
|
|
+ JSON.stringify({
|
|
|
+ type: 'getPhoneSize',
|
|
|
+ }),
|
|
|
+ );
|
|
|
+ };
|
|
|
+ wsss.onerror = function (e) {
|
|
|
+ // console.log('🚀 ~ file: WXdraw.js ~ line 82 ~ onerror ~ e', e);
|
|
|
+ wsss.close(1006);
|
|
|
+ // throttle(doConnectDirectives, 100);
|
|
|
+ // if (errorTime > 1000) {
|
|
|
+ // quit();
|
|
|
+ // }
|
|
|
};
|
|
|
- wsss.onerror = function () {
|
|
|
- wsss.close();
|
|
|
- throttle(doConnectDirectives, 100);
|
|
|
- if (errorTime > 1000) {
|
|
|
- quit();
|
|
|
+ wsss.onclose = function (e) {
|
|
|
+ // console.log('🚀 ~ file: WXdraw.js ~ line 93 ~ onclose ~ e', e);
|
|
|
+ // new WebSocket(e.)
|
|
|
+ // doConnectDirectives();
|
|
|
+ if (e.code === 1006) {
|
|
|
+ // 异常关闭,重连
|
|
|
+ throttleDoConnectDirectives();
|
|
|
+ // doConnectDirectives();
|
|
|
+ // throttle(doConnectDirectives, 100);
|
|
|
+ if (errorTime > 1000) {
|
|
|
+ quit();
|
|
|
+ }
|
|
|
}
|
|
|
};
|
|
|
wsss.onmessage = function (res) {
|
|
|
- var result = typeof res.data === 'string' ? JSON.parse(res.data) : res.data
|
|
|
+ var result = typeof res.data === 'string' ? JSON.parse(res.data) : res.data;
|
|
|
+ console.log(
|
|
|
+ '🚀 ~ file: WXdraw.js ~ line 78 ~ doConnectDirectives ~ result',
|
|
|
+ result,
|
|
|
+ );
|
|
|
+
|
|
|
if (result.type === 'cutting') {
|
|
|
if (result.data.status === 0) {
|
|
|
- $.toast('复制成功', "text");
|
|
|
+ $.toast('复制成功', 'text');
|
|
|
} else {
|
|
|
- $.toast(result.msg, "text");
|
|
|
+ $.toast(result.msg, 'text');
|
|
|
}
|
|
|
- return
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (result.type === 'forwardMsgRep') {
|
|
|
+ // 当前云机无其他终端在线,获得控制权
|
|
|
+ changIsControl(true);
|
|
|
}
|
|
|
- if (result.type === 'forwardMsg' && isAuth !== 'none') {
|
|
|
- if (result.data.code === 4000 || result.data.code === 3000) {
|
|
|
- if (isAuth === 'huo') {
|
|
|
- $.confirm("授权方已收回控制权,您进入观看屏幕模式", function () {
|
|
|
- //点击确认后的回调函数
|
|
|
- isControl = false;
|
|
|
- }, function () {
|
|
|
- isControl = false;
|
|
|
- //点击取消后的回调函数
|
|
|
- quit();
|
|
|
- });
|
|
|
- } else {
|
|
|
- $.confirm("当前云手机正在授控,是否请求获取云手机控制权?", function () {
|
|
|
- //点击确认后的回调函数
|
|
|
- var ping = {
|
|
|
- "type": "forwardMsg",
|
|
|
- "data": {
|
|
|
- "code": "5000",
|
|
|
- "desc": "控制权限收回" // 可选
|
|
|
- }
|
|
|
+ if (result.type === 'forwardMsg') {
|
|
|
+ /**
|
|
|
+ * @type {boolean} isControl 当前是否拥有控制权,初始化时为false
|
|
|
+ * @type {string} isAuth 当前云机类型 - huo: 获取的云机,none: 自己的云机
|
|
|
+ * @type {string} username 当前登录的双子星账号username
|
|
|
+ */
|
|
|
+
|
|
|
+ if (result.data.username !== username) {
|
|
|
+ switch (String(result.data.code)) {
|
|
|
+ case '3000': {
|
|
|
+ if (isControl) {
|
|
|
+ // 回复有控制
|
|
|
+ wsss.send(
|
|
|
+ JSON.stringify({
|
|
|
+ type: 'forwardMsg',
|
|
|
+ data: {
|
|
|
+ code: '4000',
|
|
|
+ username,
|
|
|
+ desc: '有控制', // 可选
|
|
|
+ },
|
|
|
+ }),
|
|
|
+ );
|
|
|
+ return;
|
|
|
}
|
|
|
- wsss.send(JSON.stringify(ping));
|
|
|
- isControl = true;
|
|
|
- }, function () {
|
|
|
- //点击取消后的回调函数
|
|
|
- isControl = false;
|
|
|
- });
|
|
|
+ // 回复有观看
|
|
|
+ wsss.send(
|
|
|
+ JSON.stringify({
|
|
|
+ type: 'forwardMsg',
|
|
|
+ data: {
|
|
|
+ code: '4100',
|
|
|
+ username,
|
|
|
+ desc: '有观看', // 可选
|
|
|
+ },
|
|
|
+ }),
|
|
|
+ );
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ case '4000': {
|
|
|
+ // 当前是获取方
|
|
|
+ if (isAuth === 'huo' && isControl) {
|
|
|
+ $.confirm(
|
|
|
+ '授权方已收回控制权,您进入观看屏幕模式',
|
|
|
+ function () {
|
|
|
+ //点击确认后的回调函数
|
|
|
+ changIsControl(false);
|
|
|
+ },
|
|
|
+ function () {
|
|
|
+ changIsControl(false);
|
|
|
+ //点击取消后的回调函数
|
|
|
+ quit();
|
|
|
+ },
|
|
|
+ );
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!isControl && isAuth === 'shou') {
|
|
|
+ // 当前是授权方切没有控制权
|
|
|
+ $.confirm(
|
|
|
+ '当前云手机正在授控,是否请求获取云手机控制权?',
|
|
|
+ function () {
|
|
|
+ //点击确认后的回调函数
|
|
|
+ wsss.send(
|
|
|
+ JSON.stringify({
|
|
|
+ type: 'forwardMsg',
|
|
|
+ data: {
|
|
|
+ code: '5000',
|
|
|
+ username,
|
|
|
+ desc: '控制权限收回', // 可选
|
|
|
+ },
|
|
|
+ }),
|
|
|
+ );
|
|
|
+ changIsControl(true);
|
|
|
+ },
|
|
|
+ function () {
|
|
|
+ //点击取消后的回调函数
|
|
|
+ changIsControl(false);
|
|
|
+ },
|
|
|
+ );
|
|
|
+
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ case '5000': {
|
|
|
+ // if (result.data.username === username) {
|
|
|
+ // changIsControl(true);
|
|
|
+ // return;
|
|
|
+ // }
|
|
|
+ if (isAuth === 'huo' && isControl) {
|
|
|
+ $.confirm(
|
|
|
+ '授权方已收回控制权,您进入观看屏幕模式',
|
|
|
+ function () {
|
|
|
+ //点击确认后的回调函数
|
|
|
+ changIsControl(false);
|
|
|
+ },
|
|
|
+ function () {
|
|
|
+ changIsControl(false);
|
|
|
+ //点击取消后的回调函数
|
|
|
+ quit();
|
|
|
+ },
|
|
|
+ );
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ default: {
|
|
|
+ return;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- return
|
|
|
+ return;
|
|
|
}
|
|
|
if (result.type === 'payInitiateEvent') {
|
|
|
var url = window.location.href;
|
|
@@ -129,149 +251,341 @@ function doConnectDirectives() {
|
|
|
dataType: 'json',
|
|
|
contentType: 'application/json;charset=UTF-8',
|
|
|
success: function (res) {
|
|
|
- if(result.data.payType === 1) { // 微信
|
|
|
- if (window.__wxjs_environment === 'miniprogram') { // 小程序
|
|
|
+ if (result.data.payType === 1) {
|
|
|
+ // 微信
|
|
|
+ if (window.__wxjs_environment === 'miniprogram') {
|
|
|
+ // 小程序
|
|
|
// copyUrl(result.data.payUrl);
|
|
|
} else {
|
|
|
- window.location.href = result.data.payUrl
|
|
|
+ window.location.href = result.data.payUrl;
|
|
|
}
|
|
|
} else {
|
|
|
- window.location.href = result.data.payUrl
|
|
|
+ window.location.href = result.data.payUrl;
|
|
|
}
|
|
|
},
|
|
|
});
|
|
|
- return
|
|
|
+ return;
|
|
|
}
|
|
|
- }
|
|
|
+ if (result.type === 'getPhoneSize' || result.type === 'setPhoneSize') {
|
|
|
+ // console.log(result);
|
|
|
+ if (
|
|
|
+ window.currentPhoneSize &&
|
|
|
+ (window.currentPhoneSize.width !==
|
|
|
+ Math.min(result.data.width, result.data.height) ||
|
|
|
+ window.currentPhoneSize.height !==
|
|
|
+ Math.max(result.data.width, result.data.height) ||
|
|
|
+ window.currentPhoneSize.dpi !== result.data.dpi)
|
|
|
+ ) {
|
|
|
+ // 获取到的分辨率与当前分辨率不符
|
|
|
+
|
|
|
+ const data = window.phoneSizeList.find(function (v) {
|
|
|
+ return (
|
|
|
+ v.width === Math.min(result.data.width, result.data.height) &&
|
|
|
+ v.height === Math.max(result.data.width, result.data.height) &&
|
|
|
+ v.dpi === result.data.dpi
|
|
|
+ );
|
|
|
+ });
|
|
|
+ window.currentPhoneSize = data || {
|
|
|
+ width: Math.min(result.data.width, result.data.height),
|
|
|
+ height: Math.max(result.data.width, result.data.height),
|
|
|
+ dpi: result.data.dpi,
|
|
|
+ };
|
|
|
+
|
|
|
+ if (result.type === 'setPhoneSize') {
|
|
|
+ lastSetPhone = Date.now();
|
|
|
+ }
|
|
|
+ // if (result.type === 'getPhoneSize') {
|
|
|
+ // 上报给后端
|
|
|
+ $.ajax({
|
|
|
+ url:
|
|
|
+ baseUrl +
|
|
|
+ '/api/resources/v5/machine/resolution/operationResolvingPower',
|
|
|
+ headers: {
|
|
|
+ Authorization: token,
|
|
|
+ },
|
|
|
+ type: 'post',
|
|
|
+ dataType: 'json',
|
|
|
+ contentType: 'application/json; charset=UTF-8',
|
|
|
+ data: JSON.stringify({
|
|
|
+ userCardId: window.userCardId,
|
|
|
+ resolvingPowerId: window.currentPhoneSize.id,
|
|
|
+ }),
|
|
|
+ });
|
|
|
+ }
|
|
|
+ // }
|
|
|
+
|
|
|
+ updateDB(db, storeName, {
|
|
|
+ id: userCardId,
|
|
|
+ socketURL: socketURL,
|
|
|
+ cUrl: cUrl,
|
|
|
+ cardToken: cardToken,
|
|
|
+ resolvingPower: resolvingPower,
|
|
|
+ width: window.currentPhoneSize.width,
|
|
|
+ height: window.currentPhoneSize.height,
|
|
|
+ dpi: window.currentPhoneSize.dpi,
|
|
|
+ });
|
|
|
+
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ };
|
|
|
}
|
|
|
-$('body').on("click", function () {
|
|
|
- draw_graph('pencil', this)
|
|
|
-})
|
|
|
+$('body').on('click', function () {
|
|
|
+ draw_graph('pencil', this);
|
|
|
+});
|
|
|
//剪切板
|
|
|
-$(".upload").on("click", function () {
|
|
|
- var texts = $(this).attr("data-text")
|
|
|
- if (texts == "uploads") {
|
|
|
- $(".mainbox").css({
|
|
|
- "display": "block"
|
|
|
- })
|
|
|
- $(".sbox").css({
|
|
|
- "display": "none"
|
|
|
- })
|
|
|
+$('.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" && isControl) {
|
|
|
+$('.botmat1img').on('click', function () {
|
|
|
+ var codes = $(this).attr('data-text');
|
|
|
+ if (codes == 'home' && isControl) {
|
|
|
wsss.send(ExexuteKeyBoard(3));
|
|
|
- } else if (codes == "return" && isControl) {
|
|
|
+ } else if (codes == 'return' && isControl) {
|
|
|
wsss.send(ExexuteKeyBoard(4));
|
|
|
- } else if (codes == "gengduo" && isControl) {
|
|
|
+ } else if (codes == 'gengduo' && isControl) {
|
|
|
wsss.send(ExexuteKeyBoard(187));
|
|
|
}
|
|
|
-})
|
|
|
+});
|
|
|
// 高清控制
|
|
|
-$(".PictureQuality").on("click", function () {
|
|
|
+$('.PictureQuality').on('click', function () {
|
|
|
if (!isControl) {
|
|
|
- return
|
|
|
+ return;
|
|
|
}
|
|
|
- $(this).addClass("avit").siblings().removeClass('avit')
|
|
|
- var id = $(this).attr("data-id")
|
|
|
+ $(this).addClass('avit').siblings().removeClass('avit');
|
|
|
+ var id = $(this).attr('data-id');
|
|
|
var cmd = {
|
|
|
- type: "switchSharpness",
|
|
|
+ type: 'switchSharpness',
|
|
|
};
|
|
|
|
|
|
- decodeWoker.postMessage(cmd);//通知解码器worker切换分辨率
|
|
|
+ decodeWoker.postMessage(cmd); //通知解码器worker切换分辨率
|
|
|
var buffer = makeSharpness(Number(id));
|
|
|
webSocketWorker.postMessage(buffer);
|
|
|
-})
|
|
|
+});
|
|
|
var canDraw = false;
|
|
|
//画图形
|
|
|
var draw_graph = function (graphType) {
|
|
|
//把蒙版放于画板上面
|
|
|
- $("#container").css("z-index", 30);
|
|
|
- $("#dedit").css("z-index", 20);
|
|
|
+ $('#container').css('z-index', 30);
|
|
|
+ $('#dedit').css('z-index', 20);
|
|
|
// 先画在蒙版上 再复制到画布上
|
|
|
//鼠标按下获取 开始xy开始画图
|
|
|
- var ongoingTouches = [];
|
|
|
+ // var ongoingTouches = [];
|
|
|
var touchstart = function (e) {
|
|
|
+ // console.log('🚀 ~ file: WXdraw.js ~ line 244 ~ touchstart ~ e', e);
|
|
|
+
|
|
|
if (!isControl) {
|
|
|
- return
|
|
|
- }
|
|
|
- $('.control-right-img').attr({
|
|
|
- "data-id": "2"
|
|
|
- })
|
|
|
- $(".leftmains").css({
|
|
|
- "right": "-4rem"
|
|
|
- })
|
|
|
- var touchfor = e.originalEvent.changedTouches; //for 的手指数组
|
|
|
- //是否横屏
|
|
|
- for (var i = 0; i < touchfor.length; i++) {
|
|
|
- var acrossWidthX = touchfor[i].pageY * (videoHeight / voheight);
|
|
|
- var acrossHeightY = videoWidth - touchfor[i].pageX * (videoWidth / vowidth);
|
|
|
- var verticalWidthX = touchfor[i].pageX * (videoWidth / vowidth);
|
|
|
- var verticalHeightY = touchfor[i].pageY * (videoHeight / voheight);
|
|
|
- var idx = ongoingTouches.findIndex(function (ele) {
|
|
|
- return ele.identifier === touchfor[i].identifier
|
|
|
- })
|
|
|
- if (idx < 0) {
|
|
|
- ongoingTouches.push(touchfor[i]);
|
|
|
- }
|
|
|
- var ping = resolving == 0 ?
|
|
|
- { "data": { "action": 0, "count": ongoingTouches.length, "pointerId": touchfor[i].identifier, "x": acrossWidthX.toFixed(2), "y": acrossHeightY.toFixed(2) }, "type": "event" } :
|
|
|
- { "data": { "action": 0, "count": ongoingTouches.length, "pointerId": touchfor[i].identifier, "x": verticalWidthX.toFixed(2), "y": verticalHeightY.toFixed(2) }, "type": "event" };
|
|
|
- wsss.send(JSON.stringify(ping));
|
|
|
+ return;
|
|
|
}
|
|
|
+ const action = 0;
|
|
|
+ Array.from(e.originalEvent.changedTouches).forEach(function (item, index) {
|
|
|
+ const x = item.clientX - item.target.getBoundingClientRect().x;
|
|
|
+ const y = item.clientY - item.target.getBoundingClientRect().y;
|
|
|
+ return wsss.send(
|
|
|
+ JSON.stringify({
|
|
|
+ type: 'event',
|
|
|
+ data: {
|
|
|
+ action,
|
|
|
+ count: e.originalEvent.touches.length,
|
|
|
+ pointerId: item.identifier,
|
|
|
+ x: (function () {
|
|
|
+ return (
|
|
|
+ resolving
|
|
|
+ ? x * (window.currentPhoneSize.width / vowidth)
|
|
|
+ : y * (window.currentPhoneSize.height / voheight)
|
|
|
+ ).toFixed(2);
|
|
|
+ })(),
|
|
|
+ y: (function () {
|
|
|
+ return (
|
|
|
+ resolving
|
|
|
+ ? y * (window.currentPhoneSize.height / voheight)
|
|
|
+ : (vowidth - x) * (window.currentPhoneSize.width / vowidth)
|
|
|
+ ).toFixed(2);
|
|
|
+ })(),
|
|
|
+ },
|
|
|
+ }),
|
|
|
+ );
|
|
|
+ });
|
|
|
canDraw = true;
|
|
|
};
|
|
|
|
|
|
//鼠标离开 把蒙版canvas的图片生成到canvas中
|
|
|
var touchend = function (e) {
|
|
|
if (!isControl) {
|
|
|
- return
|
|
|
- }
|
|
|
- var touchfor = e.originalEvent.changedTouches; //for 的手指数组
|
|
|
- //是否横屏
|
|
|
- for (var i = 0; i < touchfor.length; i++) {
|
|
|
- var acrossWidthX = touchfor[i].pageY * (videoHeight / voheight);
|
|
|
- var acrossHeightY = videoWidth - touchfor[i].pageX * (videoWidth / vowidth);
|
|
|
- var verticalWidthX = touchfor[i].pageX * (videoWidth / vowidth);
|
|
|
- var verticalHeightY = touchfor[i].pageY * (videoHeight / voheight);
|
|
|
- var ping = resolving == 0 ?
|
|
|
- { "data": { "action": 1, "count": ongoingTouches.length, "pointerId": touchfor[i].identifier, "x": acrossWidthX.toFixed(2), "y": acrossHeightY.toFixed(2) }, "type": "event" } :
|
|
|
- { "data": { "action": 1, "count": ongoingTouches.length, "pointerId": touchfor[i].identifier, "x": verticalWidthX.toFixed(2), "y": verticalHeightY.toFixed(2) }, "type": "event" };
|
|
|
- wsss.send(JSON.stringify(ping));
|
|
|
- ongoingTouches.forEach(function (item, index) {
|
|
|
- if (item.identifier === touchfor[i].identifier) {
|
|
|
- ongoingTouches.splice(index, 1)
|
|
|
- }
|
|
|
- })
|
|
|
+ return;
|
|
|
}
|
|
|
+ const action = 1;
|
|
|
+ Array.from(e.originalEvent.changedTouches).forEach(function (item, index) {
|
|
|
+ const x = item.clientX - item.target.getBoundingClientRect().x;
|
|
|
+ const y = item.clientY - item.target.getBoundingClientRect().y;
|
|
|
+ return wsss.send(
|
|
|
+ JSON.stringify({
|
|
|
+ type: 'event',
|
|
|
+ data: {
|
|
|
+ action,
|
|
|
+ count: e.originalEvent.touches.length,
|
|
|
+ pointerId: item.identifier,
|
|
|
+ x: (function () {
|
|
|
+ return (
|
|
|
+ resolving
|
|
|
+ ? x * (window.currentPhoneSize.width / vowidth)
|
|
|
+ : y * (window.currentPhoneSize.height / voheight)
|
|
|
+ ).toFixed(2);
|
|
|
+ })(),
|
|
|
+ y: (function () {
|
|
|
+ return (
|
|
|
+ resolving
|
|
|
+ ? y * (window.currentPhoneSize.height / voheight)
|
|
|
+ : (vowidth - x) * (window.currentPhoneSize.width / vowidth)
|
|
|
+ ).toFixed(2);
|
|
|
+ })(),
|
|
|
+ },
|
|
|
+ }),
|
|
|
+ );
|
|
|
+ });
|
|
|
+ // var touchfor = e.originalEvent.changedTouches; //for 的手指数组
|
|
|
+ // //是否横屏
|
|
|
+ // for (var i = 0; i < touchfor.length; i++) {
|
|
|
+ // // var acrossWidthX = touchfor[i].pageY * (videoHeight / voheight);
|
|
|
+ // // var acrossHeightY =
|
|
|
+ // // videoWidth - touchfor[i].pageX * (videoWidth / vowidth);
|
|
|
+ // // if (resolving) {
|
|
|
+ // // var verticalWidthX =
|
|
|
+ // // touchfor[i].pageX * (window.currentPhoneSize.width / vowidth);
|
|
|
+ // // var verticalHeightY =
|
|
|
+ // // touchfor[i].pageY * (window.currentPhoneSize.height / voheight);
|
|
|
+ // // } else {
|
|
|
+ // // var verticalWidthX =
|
|
|
+ // // touchfor[i].pageX * (window.currentPhoneSize.width / vowidth);
|
|
|
+ // // var verticalHeightY =
|
|
|
+ // // touchfor[i].pageY * (window.currentPhoneSize.height / voheight);
|
|
|
+ // // }
|
|
|
+ // var ping =
|
|
|
+ // // resolving == 0 ?
|
|
|
+ // // { "data": { "action": 1, "count": ongoingTouches.length, "pointerId": touchfor[i].identifier, "x": acrossWidthX.toFixed(2), "y": acrossHeightY.toFixed(2) }, "type": "event" } :
|
|
|
+ // {
|
|
|
+ // data: {
|
|
|
+ // action: 1,
|
|
|
+ // count: ongoingTouches.length,
|
|
|
+ // pointerId: touchfor[i].identifier,
|
|
|
+ // x: (() =>
|
|
|
+ // (resolving
|
|
|
+ // ? touchfor[i].pageX * (window.currentPhoneSize.width / vowidth)
|
|
|
+ // : touchfor[i].pageY * (window.currentPhoneSize.width / voheight)
|
|
|
+ // ).toFixed(2))(),
|
|
|
+ // y: (() =>
|
|
|
+ // (resolving
|
|
|
+ // ? touchfor[i].pageY *
|
|
|
+ // (window.currentPhoneSize.height / voheight)
|
|
|
+ // : (vowidth - touchfor[i].pageX) *
|
|
|
+ // (window.currentPhoneSize.height / vowidth)
|
|
|
+ // ).toFixed(2))(),
|
|
|
+ // },
|
|
|
+ // type: 'event',
|
|
|
+ // };
|
|
|
+ // wsss.send(JSON.stringify(ping));
|
|
|
+ // ongoingTouches.forEach(function (item, index) {
|
|
|
+ // if (item.identifier === touchfor[i].identifier) {
|
|
|
+ // ongoingTouches.splice(index, 1);
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // }
|
|
|
canDraw = false;
|
|
|
};
|
|
|
|
|
|
//清空层 云手机超出屏幕的开关
|
|
|
var clearContext = function () {
|
|
|
canDraw = false;
|
|
|
- }
|
|
|
+ };
|
|
|
|
|
|
// 鼠标移动
|
|
|
var touchmove = function (e) {
|
|
|
+ e.preventDefault();
|
|
|
if (!isControl) {
|
|
|
- return
|
|
|
- }
|
|
|
- var touchfor = e.originalEvent.targetTouches; //for 的手指数组
|
|
|
- for (var i = 0; i < touchfor.length; i++) {
|
|
|
- var acrossWidthX = touchfor[i].pageY * (videoHeight / voheight);
|
|
|
- var acrossHeightY = videoWidth - touchfor[i].pageX * (videoWidth / vowidth);
|
|
|
- var verticalWidthX = touchfor[i].pageX * (videoWidth / vowidth);
|
|
|
- var verticalHeightY = touchfor[i].pageY * (videoHeight / voheight);
|
|
|
- var ping = resolving == 0 ?
|
|
|
- { "data": { "action": 2, "count": touchfor.length, "pointerId": touchfor[i].identifier, "x": acrossWidthX.toFixed(2), "y": acrossHeightY.toFixed(2) }, "type": "event" } :
|
|
|
- { "data": { "action": 2, "count": touchfor.length, "pointerId": touchfor[i].identifier, "x": verticalWidthX.toFixed(2), "y": verticalHeightY.toFixed(2) }, "type": "event" };
|
|
|
- wsss.send(JSON.stringify(ping));
|
|
|
+ return;
|
|
|
}
|
|
|
+ const action = 2;
|
|
|
+ Array.from(e.originalEvent.changedTouches).forEach(function (item, index) {
|
|
|
+ const x = item.clientX - item.target.getBoundingClientRect().x;
|
|
|
+ const y = item.clientY - item.target.getBoundingClientRect().y;
|
|
|
+ return wsss.send(
|
|
|
+ JSON.stringify({
|
|
|
+ type: 'event',
|
|
|
+ data: {
|
|
|
+ action,
|
|
|
+ count: e.originalEvent.touches.length,
|
|
|
+ pointerId: item.identifier,
|
|
|
+ x: (function () {
|
|
|
+ return (
|
|
|
+ resolving
|
|
|
+ ? x * (window.currentPhoneSize.width / vowidth)
|
|
|
+ : y * (window.currentPhoneSize.height / voheight)
|
|
|
+ ).toFixed(2);
|
|
|
+ })(),
|
|
|
+ y: (function () {
|
|
|
+ return (
|
|
|
+ resolving
|
|
|
+ ? y * (window.currentPhoneSize.height / voheight)
|
|
|
+ : (vowidth - x) * (window.currentPhoneSize.width / vowidth)
|
|
|
+ ).toFixed(2);
|
|
|
+ })(),
|
|
|
+ },
|
|
|
+ }),
|
|
|
+ );
|
|
|
+ });
|
|
|
+ // var touchfor = e.originalEvent.targetTouches; //for 的手指数组
|
|
|
+ // for (var i = 0; i < touchfor.length; i++) {
|
|
|
+ // // var acrossWidthX = touchfor[i].pageY * (videoHeight / voheight);
|
|
|
+ // // var acrossHeightY =
|
|
|
+ // // videoWidth - touchfor[i].pageX * (videoWidth / vowidth);
|
|
|
+
|
|
|
+ // // let verticalWidthX = 0;
|
|
|
+ // // let verticalHeightY = 0;
|
|
|
+ // // if (resolving) {
|
|
|
+ // // verticalWidthX =
|
|
|
+ // // touchfor[i].pageX * (window.currentPhoneSize.width / vowidth);
|
|
|
+ // // verticalHeightY =
|
|
|
+ // // touchfor[i].pageY * (window.currentPhoneSize.height / voheight);
|
|
|
+ // // } else {
|
|
|
+ // // verticalWidthX =
|
|
|
+ // // touchfor[i].pageX * (window.currentPhoneSize.width / vowidth);
|
|
|
+ // // verticalHeightY =
|
|
|
+ // // touchfor[i].pageY * (window.currentPhoneSize.height / voheight);
|
|
|
+ // // }
|
|
|
+ // var ping =
|
|
|
+ // // resolving == 0 ?
|
|
|
+ // // { "data": { "action": 2, "count": touchfor.length, "pointerId": touchfor[i].identifier, "x": acrossWidthX.toFixed(2), "y": acrossHeightY.toFixed(2) }, "type": "event" } :
|
|
|
+ // {
|
|
|
+ // data: {
|
|
|
+ // action: 2,
|
|
|
+ // count: touchfor.length,
|
|
|
+ // pointerId: touchfor[i].identifier,
|
|
|
+ // x: (() =>
|
|
|
+ // (resolving
|
|
|
+ // ? touchfor[i].pageX * (window.currentPhoneSize.width / vowidth)
|
|
|
+ // : touchfor[i].pageY * (window.currentPhoneSize.width / voheight)
|
|
|
+ // ).toFixed(2))(),
|
|
|
+ // y: (() =>
|
|
|
+ // (resolving
|
|
|
+ // ? touchfor[i].pageY *
|
|
|
+ // (window.currentPhoneSize.height / voheight)
|
|
|
+ // : (vowidth - touchfor[i].pageX) *
|
|
|
+ // (window.currentPhoneSize.height / vowidth)
|
|
|
+ // ).toFixed(2))(),
|
|
|
+ // },
|
|
|
+ // type: 'event',
|
|
|
+ // };
|
|
|
+ // wsss.send(JSON.stringify(ping));
|
|
|
+ // }
|
|
|
};
|
|
|
|
|
|
//鼠标离开区域以外 除了涂鸦 都清空
|
|
@@ -279,22 +593,22 @@ var draw_graph = function (graphType) {
|
|
|
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);
|
|
|
-}
|
|
|
+ };
|
|
|
+ $(canvas_bak).off();
|
|
|
+ $(canvas_bak).on('touchstart', touchstart);
|
|
|
+ $(canvas_bak).on('touchmove', touchmove);
|
|
|
+ $(canvas_bak).on('touchend', touchend);
|
|
|
+ $(canvas_bak).on('mouseout', mouseout);
|
|
|
+};
|
|
|
|
|
|
function GetRequest() {
|
|
|
var url = location.search; // 获取url中"?"符后的字串
|
|
|
var obj = new Object();
|
|
|
- if (url.indexOf("?") != -1) {
|
|
|
+ if (url.indexOf('?') != -1) {
|
|
|
var str = url.substr(1);
|
|
|
- strs = str.split("&");
|
|
|
+ strs = str.split('&');
|
|
|
for (var i = 0; i < strs.length; i++) {
|
|
|
- obj[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
|
|
|
+ obj[strs[i].split('=')[0]] = strs[i].split('=')[1];
|
|
|
}
|
|
|
}
|
|
|
return obj;
|