android-cloud-H5/static/distss/draw.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
} else {
	console.log("numse>>>", numse)
	var voheight = window.screen.height - topwinHeightDraw
}

//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);
          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 urlss= url[2]
var wsss = new WebSocket("ws://"+urlss+"/controlWebSocket?"+"clientType="+data.clientType+"&cardIp="+data.cardIp+"&port="+data.port+"&sn="+data.sn);

////
// 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":400},"event":"bitRate"}
     wsss.send(JSON.stringify(bitRate));
};
wsss.onmessage = function(event) {
	var resets = JSON.parse(event.data)

	resolving = resets.data.orientation
	if (resolving == 1) {} else {}

};
wsss.onclose = function(event) {

};
wsss.onerror = function(event) {

};
$('#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"})
	}
})

//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"} 
     wsss.send(JSON.stringify(bitRate));
	}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;
    var touchNum = 0
	var touchPos = {};
	//鼠标按下获取 开始xy开始画图
	var touchstart = function(e) {
		//		.toFixed(2)
		var touchfor = e.originalEvent.targetTouches; //for 的手指数组
		var touch = e.originalEvent.targetTouches[0];
		var thochlethng = e.originalEvent.targetTouches.length
		touchNum = thochlethng;
		touchPos = touch;
		e.preventDefault()
		 
		if(touchfor.length == 1){
			var pingssfe = {
		      "event": "getScreenStatus"
	        }
			wsss.send(JSON.stringify(pingssfe));
		}
			
	
		
		//是否横屏
		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));
			}
			
		} 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));
			}
			
			
		}

	canDraw = true;

	};

	//鼠标离开 把蒙版canvas的图片生成到canvas中
	var touchend = function(e) {
		e.preventDefault()
        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"}
        	
        	}
        	(touchNum <= 1 || (touch.pageY == touchPos.pageY && touch.pageX == touchPos.pageX)) && 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"}
        	
        	}
        	(touchNum <= 1 || (touch.pageY == touchPos.pageY && touch.pageX == touchPos.pageX)) && 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
		touchNum = thochlethng;
		touchPos = touch;
		e.preventDefault();
		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) {

}