android-cloud-H5/screenAndroid/WXdraw.js

//画布
var canvas;
var context;
//蒙版
var canvas_bak = document.getElementById("box");;
var context_bak;

var canvasWidth = 720;
var canvasHeight = 1280;

var canvasTop;
var canvasLeft;
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

//计算title top 头部
if (numse <= 70) {

	var voheight = window.screen.height - winHeight - 34 - 20
} else {
	console.log("numse>>>", numse)
	var voheight = window.screen.height - topwinHeightDraw - 20
}

//console.log("画笔大小>>>",window.innerHeight)
//画笔大小
var size = 1;
var color = '#000000';
var resolving
//alert(winHeight)
var url = window.location.href;
url = url.split('/')

var query = window.location.search.substring(1);
// debugger
// query = "clientType=3&username=WqXTc1593762177&userCardId=377"
// debugger
var vars = query.split("&");
var data = {}
var clientType = vars.find(e => {
	return e.startsWith('clientType')
}) || ''
var cardIp = vars.find(e => {
	return e.startsWith('cardIp')
}) || ''
var port = vars.find(e => {
	return e.startsWith('port')
}) || ''

var sn = vars.find(e => {
	return e.startsWith('sn')
}) || ''
var username = vars.find(e => {
	return e.startsWith('username')
}) || ''
var userCardId = vars.find(e => {
	return e.startsWith('userCardId')
}) || ''
var ip = vars.find(e => {
	return e.startsWith('ip')
}) || ''

var data = {}
data.clientType = clientType.substring(11, clientType.length)

data.cardIp = cardIp.substring(7, cardIp.length)

data.port = port.substring(5, port.length)

data.sn = sn.substring(3, sn.length)
data.username = username.substring(9, username.length)
data.userCardId = userCardId.substring(11, userCardId.length)
data.ip = ip.substring(3, ip.length)
// var urlss=url[2]
// urlss = "14.215.128.96"
urlss = '192.168.31.20'
// urlss = 'test.androidscloud.com'
// debugger
// var cUrl = ''
// cUrl = "ws://192.168.11.66:9101";
// var cUrl="wss://www.ted2018.com:9101"
var cUrl = "ws://192.168.198.11:9101"
// if (data.clientType == 3) {
// 	cUrl = "wss://" + urlss + "/authControlWebSocket?" + "clientType=" + data.clientType + "&username=" + data.username +
// 		"&userCardId=" + data.userCardId
// } else if (data.clientType == 2) {
// 	// cUrl = "wss://" + urlss + "/shareWebSocket?" + "clientType=" + data.clientType + "&username=" + data.username +
// 	// 	"&userCardId=" + data.userCardId + "&ip=" + data.ip
// 	cUrl = "wss://test.androidscloud.com/videoWebSocket?clientType=1&cardIp=14.215.128.96&port=2005&sn=RK3930C2301900005";
// } else {
// 	cUrl = "wss://" + urlss + "/controlWebSocket?" + "clientType=" + data.clientType + "&cardIp=" + data.cardIp + "&port=" +
// 		data.port + "&sn=" + data.sn
// }
console.log(cUrl, 'curl')
// var cUrl = Number(data.clientType) === 3? "ws://"+urlss+"/authControlWebSocket?"+"clientType="+data.clientType+"&username="+data.username+"&userCardId="+data.userCardId : "ws://"+urlss+"/controlWebSocket?"+"clientType="+data.clientType+"&cardIp="+data.cardIp+"&port="+data.port+"&sn="+data.sn
var wsss = new WebSocket(cUrl);
console.log('wsssss==============', wsss)
wsss.binaryType = 'arraybuffer';
////
// wsss = new WebSocket(
// 	"ws://14.215.128.96/authControlWebSocket?clientType=3&username=WqXTc1593762177&userCardId=377");

wsss.onopen = function() {
	console.log("onopen==============");
	var pings = {
		"event": "getScreenStatus"
	}
	wsss.send(JSON.stringify(pings));
	var bitRate = {
		"data": {
			"bitRate": 2243000
		},
		"event": "bitRate"
	}
	wsss.send(JSON.stringify(bitRate));
};
wsss.onmessage = function(event) {
	// console.log("onMessage==============", event);
	// var resets = JSON.parse(event.data)
	// var resets = event.data;
	// resets.errorMsg && alert(resets.errorMsg)
	// resolving = resets.data.orientation
	// if (resolving == 1) {} else {}
	// console.log('>>>resolvingresolvingresolving', resolving)

};
wsss.onclose = function(event) {
	console.log("onclose==============");
};
wsss.onerror = function(event) {
	console.log("onerror==============");
};
$('#box').on("click", function() {

	draw_graph('pencil', this)
})
//剪切板
$(".upload").on("click", function() {
	let texts = $(this).attr("data-text")
	if (texts == "uploads") {
		$(".mainbox").css({
			"display": "block"
		})
		$(".sbox").css({
			"display": "none"
		})
	} else if (texts == "Signout") {
		//		alert()

	}
})

//home 控制home
$(".botmat1img").on("click", function() {
	let codes = $(this).attr("data-text")
	console.log(codes)
	if (codes == "home") {
		var bitRate = {
			"data": {
				"keyCode": "3"
			},
			"event": "keyCode"
		}
		console.log("打印主页json", JSON.stringify(bitRate))
		wsss.send(JSON.stringify(bitRate));
		console.log("打印主页json", wsss)
	} else if (codes == "return") {
		var bitRate = {
			"data": {
				"keyCode": "4"
			},
			"event": "keyCode"
		}
		wsss.send(JSON.stringify(bitRate));
	} else if (codes == "gengduo") {
		var bitRate = {
			"data": {
				"keyCode": "187"
			},
			"event": "keyCode"
		}
		wsss.send(JSON.stringify(bitRate));
	}

})
//高清控制
$(".PictureQuality").on("click", function() {
	$(this).addClass("avit").siblings().removeClass('avit')
	let id = $(this).attr("data-id")
	var bitRate = {
		"data": {
			"bitRate": id
		},
		"event": "bitRate"
	}
	wsss.send(JSON.stringify(bitRate));
	console.log(id)
})

//画图形
var draw_graph = function(graphType, obj) {
	console.log('111》》》', graphType)
	//把蒙版放于画板上面
	//$("#canvas_bak").css("z-index",1);
	$("#container").css("z-index", 30);
	$("#dedit").css("z-index", 20);
	//先画在蒙版上 再复制到画布上

	chooseImg(obj);
	var canDraw = false;

	var startX;
	var startY;

	//鼠标按下获取 开始xy开始画图
	var touchstart = function(e) {
		$('.control-right-img').attr({
			"data-id": "2"
		})
		$(".leftmains").css({
			"right": "-4rem"
		})
		//		.toFixed(2)
		var touchfor = e.originalEvent.targetTouches; //for 的手指数组
		var touch = e.originalEvent.targetTouches[0];
		var thochlethng = e.originalEvent.targetTouches.length
		//是否横屏
		if (resolving == 0) {
			let ping
			for (let i = 0; i < touchfor.length; i++) {
				let cawidthXs = touchfor[i].pageY * (1280 / voheight)
				let 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(JSON.stringify(ping));
			console.log("鼠标按下>>>", ping)
		} else {
			let ping
			for (let i = 0; i < touchfor.length; i++) {
				let cawidthXs = touchfor[i].pageX * (720 / vowidth)
				let 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(JSON.stringify(ping));
			console.log("鼠标按下>>>", ping)
		}

		canDraw = true;

	};

	//鼠标离开 把蒙版canvas的图片生成到canvas中
	var touchend = function(e) {
		var touchfor = e.originalEvent.changedTouches; //for 的手指数组
		var touch = e.originalEvent.changedTouches[0];
		var thochlethng = e.originalEvent.changedTouches.length
		//	 alert(thochlethng)
		//是否横屏 morePortionUp
		if (resolving == 0) {
			let ping
			for (let i = 0; i < touchfor.length; i++) {
				let cawidthXs = touchfor[i].pageY * (1280 / voheight)
				let 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(JSON.stringify(ping));

		} else {
			let ping
			for (let i = 0; i < touchfor.length; i++) {
				let cawidthXs = touchfor[i].pageX * (720 / vowidth)
				let 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(JSON.stringify(ping));
		}

		canDraw = false;

	};

	//清空层 云手机超出屏幕的开关
	var clearContext = function(type) {
		canDraw = false;
	}

	// 鼠标移动
	var touchmove = function(e) {

		e = e || window.event;
		var touchfor = e.originalEvent.targetTouches; //for 的手指数组
		var touch = e.originalEvent.targetTouches[0];
		var thochlethng = e.originalEvent.targetTouches.length
		let ping
		//是否横屏  morePortionMove
		if (resolving == 0) {
			let obj = []
			for (let i = 0; i < touchfor.length; i++) {
				let cawidthXs = touchfor[i].pageY * (1280 / voheight)
				let 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(JSON.stringify(ping));
		} else {
			let ping
			for (let i = 0; i < touchfor.length; i++) {
				let cawidthXs = touchfor[i].pageX * (720 / vowidth)
				let 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(JSON.stringify(ping));
		}



		//				var ping = {"data":{"action":2,"count":1,"pointerId":0,"x":cawidthX.toFixed(2),"y":caheightY.toFixed(2)},"event":"2"}	    



	};

	//鼠标离开区域以外 除了涂鸦 都清空
	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);
}

//选择功能按钮 修改样式
function chooseImg(obj) {

}