android-cloud-H5/static/js/aa.js

//画布
var canvas;
var context;
//蒙版
var canvas_bak;
var context_bak;

var canvasWidth = 720;
var canvasHeight = 1280;

var canvasTop;
var canvasLeft;

//画笔大小
var size = 1;
var color = '#000000';
var resolving
//			            var query = window.location.search.substring(1);
//			          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 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)
//var wsss = new WebSocket("ws://192.168.128.254:8022/controlWebSocket?"+"clientType="+data.clientType+"&cardIp="+data.cardIp+"&port="+data.port+"&sn="+data.sn);
//


var wsss = new WebSocket("ws://192.168.128.254:8022/controlWebSocket?clientType=0&cardIp=192.168.128.106&port=9100&sn=RK3923C1201900079&demoTime=300");

wsss.onopen = function() {
	var pings = {
		"event": "getScreenStatus"
	}
	wsss.send(JSON.stringify(pings));

};
wsss.onmessage = function(event) {
	var resets = JSON.parse(event.data)

	resolving = resets.data.orientation
	console.log('>>>', resolving)
	if(resolving == 1) {

		canvas_bak = document.getElementsByTagName("canvas");

	} else {
		canvas_bak = document.getElementById("mocan");
	}

	if(resolving == 1) {
		$('#mocan').remove()
		$('canvas').css({
			"display": "block",
			"width": "100%",
			"height": "100%",
			"position": "absolute",
			"top": "0px",
			"left": "0px",
			"z-index": "999"
		})
		$('#mainScreen-main').css({"display": "block"})
	} else {

		$('canvas').css({
			"display": "block",
			"width": "153%",
			"height": "162%",
			"position": "absolute",
			"top": "-171px",
			"left": "-94px",
			"transform": "rotate(-90deg)"
		})
		$('#mainScreen-main').css({"display": "block"})
		$('#no-ne').css({
			"width": "901px",
			"height": "555px",
			"position": "absolute",
			"top": "0",
			"left": "-269px",
			"background": "#000000",
			"z-index": "99999",
			"font-size": "18px",
			"color": "#FFFFFF",
			"text-align": "center",
			
		})
		$('.no-ne-text').css({
			"margin-top": "24%",
		})
	}
	canvas_bak.width = canvasWidth;
	canvas_bak.height = canvasHeight;
	canvas = document.getElementById("mainScreen-main");
	canvasTop = $(canvas_bak).offset().top
	canvasLeft = $(canvas_bak).offset().left;
	//			context_bak = canvas_bak.getContext('2d');		
	$(canvas_bak).css("z-index", 999);
};
wsss.onclose = function(event) {

};
wsss.onerror = function(event) {

};

//画图形
var draw_graph = function(graphType, obj) {

	//把蒙版放于画板上面
	//$("#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 mousedown = function(e) {
		// 
		//横屏
		if(resolving == 1) {
//			var ping = {
//				"data": {
//					"fingerList": [{
//						"action": 0,
//						"x": e.offsetX * 2,
//						"y": e.offsetY * 2.3
//					}]
//				},
//				"event": "0"
//			}
			var ping = {"data":{"action":0,"count":1,"pointerId":0,"x":e.offsetX * 2,"y":e.offsetY * 2.3},"event":"0"}
		} else if(resolving == 0) {
//			var ping = {
//				"data": {
//					"fingerList": [{
//						"action": 0,
//						"x": e.offsetX * 1.422,
//						"y": e.offsetY * 1.3
//					}]
//				},
//				"event": "0"
//			}
			var ping = {"data":{"action":0,"count":1,"pointerId":0,"x":e.offsetX * 1.422,"y":e.offsetY * 1.3},"event":"0"}
		}

		wsss.send(JSON.stringify(ping));

		e = e || window.event;
		/*startX = e.clientX - canvasLeft;
		startY = e.clientY - canvasTop;*/
		//	    console.log('鼠标按下获取:x',e.clientX-canvasLeft,'y:',e.clientY - canvasTop)
		console.log('---当前的偏移-:x', resolving) //offsetX
		console.log('11111:x', e.clientX, '2222222y:', e.clientY) //offsetX
		console.log('offsetX:x', e.offsetX * 1.422, 'offsetY:', e.offsetY * 1.3) //offsetX
		console.log(e)
		canDraw = true;

	};

	//鼠标离开 把蒙版canvas的图片生成到canvas中
	var mouseup = function(e) {

		e = e || window.event;
		//		startX = e.clientX - canvasLeft;
		//		startY = e.clientY - canvasTop;
		//		console.log('鼠标离开>>>',e.clientX - canvasLeft)
		if(resolving == 1) {
			var ping = {
				"data": {
					"fingerList": [{
						"action": 0,
						"x": e.offsetX * 2,
						"y": e.offsetY * 2.3
					}]
				},
				"event": "1"
			}
			
			var ping =  {"data":{"action":1,"count":1,"pointerId":0,"x":e.offsetX * 2,"y":e.offsetY * 2.3},"event":"1"}
		} else if(resolving == 0) {
//			var ping = {
//				"data": {
//					"fingerList": [{
//						"action": 0,
//						"x": e.offsetX * 1.422,
//						"y": e.offsetY * 1.3
//					}]
//				},
//				"event": "1"
//			}
			
			var ping =  {"data":{"action":1,"count":1,"pointerId":0,"x":e.offsetX * 1.422,"y":e.offsetY * 1.3},"event":"1"}
		}

		wsss.send(JSON.stringify(ping));
		canDraw = false;

	};

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

	// 鼠标移动
	var mousemove = function(e) {
		//		console.log('鼠标移动7>>>','X:',e.clientX,'Y:',e.clientY)
		e = e || window.event;
		var x = e.clientX - canvasLeft;
		var y = e.clientY - canvasTop;
		//方块  4条直线搞定
		if(graphType == 'square') {
			if(canDraw) {}
			//直线
		} else if(graphType == 'line') {} else if(graphType == 'pencil') {
			if(canDraw) {

				//				context_bak.lineTo(e.clientX   - canvasLeft ,e.clientY  - canvasTop);
				//				context_bak.stroke();	
				if(resolving == 1) {
//					var ping = {
//						"data": {
//							"fingerList": [{
//								"action": 0,
//								"x": e.offsetX * 2,
//								"y": e.offsetY * 2.3
//							}]
//						},
//						"event": "2"
//					}
					var ping = {"data":{"action":2,"count":1,"pointerId":0,"x":e.offsetX * 2,"y":e.offsetY * 2.3},"event":"2"}
				} else if(resolving == 0) {
//					var ping = {
//						"data": {
//							"fingerList": [{
//								"action": 0,
//								"x": e.offsetX * 1.422,
//								"y": e.offsetY * 1.3
//							}]
//						},
//						"event": "2"
//					}
					
					var ping = {"data":{"action":2,"count":1,"pointerId":0,"x":e.offsetX * 1.422,"y":e.offsetY * 1.3},"event":"2"}
				}
				wsss.send(JSON.stringify(ping));
			}
			//圆 未画得时候 出现一个小圆
		} else if(graphType == 'circle') {} else if(graphType == 'handwriting') {
			var hwSize = 1;
			if(canDraw) {} else {}
			//橡皮擦 不管有没有在画都出现小方块 按下鼠标 开始清空区域
		} else if(graphType == 'rubber') {}
	};

	//鼠标离开区域以外 除了涂鸦 都清空
	var mouseout = function() {

		if(graphType != 'handwriting') {
			clearContext();

		}
	}

	$(canvas_bak).unbind();
	$(canvas_bak).bind('mousedown', mousedown);
	$(canvas_bak).bind('mousemove', mousemove);
	$(canvas_bak).bind('mouseup', mouseup);
	$(canvas_bak).bind('mouseout', mouseout);
}

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

}