android-cloud-H5/static/js/draw.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 url = window.location.href;
                       url = url.split('/')
                       var baseUrl =url[2]
			           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 username = vars.find(e => {
				return e.startsWith('username')
			})|| ''
			var userCardId = vars.find(e => {
				return e.startsWith('userCardId')
			})|| ''
			 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)
              // var urlss= url[2]  //'14.215.128.96'
			  var urlss = 'test.androidscloud.com'
			  var cUrl = 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 cUrl = "ws://14.215.128.96//controlWebSocket?clientType=1&sn=RK3930C2301900045&cardIp=14.215.128.96&port=2045"
var wsss = new WebSocket(cUrl);



//var wsss = new WebSocket("ws://14.215.128.96/controlWebSocket?clientType=0&cardIp=30.30.30.58&port=9100&sn=RK3930C2301900060");

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

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

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

		canvas_bak = document.getElementsByTagName("canvas");

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

	if(resolving == 1) {

		$('#mocan').removeClass('mocan')
		$('#mainScreen-main').addClass('mainScreen-main')
		$('.mainScreen-main').on('click', function() {
			 
				//		    	console.log(this)
				draw_graph('pencil', this)

			

			})
		$('canvas').css({
			"display": "block",
			"width": "100%",
			"height": "100%",
			"position": "absolute",
			"top": "0px",
			"left": "0px",
			"z-index": "999",
			"transform": "rotate(0deg)"
		})
		$('#mainScreen-main').css({"display": "block"})
	} else {
//      $("#mainScreen-main").
$('#mainScreen-main').removeClass('mainScreen-main')
$('#mocan').addClass('mocan')




$('.mocan').on('click', function() {
			 
				//		    	console.log(this)
				draw_graph('pencil', this)

			

			})






		$('canvas').css({
			"display": "block",
			"width": "153%",
			"height": "162%",
			"position": "absolute",
			"top": "-171px",
			"left": "-94px",
			"z-index": "0",
			"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%",
		})
	}
	

	//			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) {
		
		
			var pingssfe = {
		      "event": "getScreenStatus"
	        }
			wsss.send(JSON.stringify(pingssfe));
		
		// 
		//横屏
		if(resolving == 1) {
			var ping = {"data":{"action":0,"count":1,"pointerId":0,"x":e.offsetX * 2,"y":e.offsetY * 2.3},"event":"0"}
			 console.log("黄飞111》》》")
			
		} else if(resolving == 0) {
			var ping ={"data":{"action":0,"count":1,"pointerId":0,"x":e.offsetX * 1.422,"y":e.offsetY * 1.3},"event":"0"}
	
		 console.log("黄飞222》》》")
		
		}
  
		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)
		
		canDraw = true;

	};

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

		e = e || window.event;
		//		startX = e.clientX - canvasLeft;11111
		//		startY = e.clientY - canvasTop;
		//		console.log('鼠标离开>>>',e.clientX - canvasLeft)
		if(resolving == 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":{"action":1,"count":1,"pointerId":0,"x":e.offsetX * 1.422,"y":e.offsetY * 1.3},"event":"1"}
		}

		wsss.send(JSON.stringify(ping));
		// var seets = {"event":"getScreenStatus"}
		//   wsss.send(JSON.stringify(seets));
		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;

		//方块  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":{"action":2,"count":1,"pointerId":0,"x":e.offsetX * 2,"y":e.offsetY * 2.3},"event":"2"}
				} else if(resolving == 0) {
					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) {

}