123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298 |
- //画布
- 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) {
- }
|