aa.js 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298
  1. //画布
  2. var canvas;
  3. var context;
  4. //蒙版
  5. var canvas_bak;
  6. var context_bak;
  7. var canvasWidth = 720;
  8. var canvasHeight = 1280;
  9. var canvasTop;
  10. var canvasLeft;
  11. //画笔大小
  12. var size = 1;
  13. var color = '#000000';
  14. var resolving
  15. // var query = window.location.search.substring(1);
  16. // var vars = query.split("&");
  17. // var data = {}
  18. // var clientType = vars.find(e => {
  19. // return e.startsWith('clientType')
  20. // })
  21. // var cardIp = vars.find(e => {
  22. // return e.startsWith('cardIp')
  23. // })
  24. // var port = vars.find(e => {
  25. // return e.startsWith('port')
  26. // })
  27. //
  28. // var sn = vars.find(e => {
  29. // return e.startsWith('sn')
  30. // })
  31. // var data = {}
  32. // data.clientType=clientType.substring(11, clientType.length)
  33. //
  34. // data.cardIp=cardIp.substring(7, cardIp.length)
  35. //
  36. // data.port=port.substring(5, port.length)
  37. //
  38. // data.sn=sn.substring(3, sn.length)
  39. //var wsss = new WebSocket("ws://192.168.128.254:8022/controlWebSocket?"+"clientType="+data.clientType+"&cardIp="+data.cardIp+"&port="+data.port+"&sn="+data.sn);
  40. //
  41. var wsss = new WebSocket("ws://192.168.128.254:8022/controlWebSocket?clientType=0&cardIp=192.168.128.106&port=9100&sn=RK3923C1201900079&demoTime=300");
  42. wsss.onopen = function() {
  43. var pings = {
  44. "event": "getScreenStatus"
  45. }
  46. wsss.send(JSON.stringify(pings));
  47. };
  48. wsss.onmessage = function(event) {
  49. var resets = JSON.parse(event.data)
  50. resolving = resets.data.orientation
  51. console.log('>>>', resolving)
  52. if(resolving == 1) {
  53. canvas_bak = document.getElementsByTagName("canvas");
  54. } else {
  55. canvas_bak = document.getElementById("mocan");
  56. }
  57. if(resolving == 1) {
  58. $('#mocan').remove()
  59. $('canvas').css({
  60. "display": "block",
  61. "width": "100%",
  62. "height": "100%",
  63. "position": "absolute",
  64. "top": "0px",
  65. "left": "0px",
  66. "z-index": "999"
  67. })
  68. $('#mainScreen-main').css({"display": "block"})
  69. } else {
  70. $('canvas').css({
  71. "display": "block",
  72. "width": "153%",
  73. "height": "162%",
  74. "position": "absolute",
  75. "top": "-171px",
  76. "left": "-94px",
  77. "transform": "rotate(-90deg)"
  78. })
  79. $('#mainScreen-main').css({"display": "block"})
  80. $('#no-ne').css({
  81. "width": "901px",
  82. "height": "555px",
  83. "position": "absolute",
  84. "top": "0",
  85. "left": "-269px",
  86. "background": "#000000",
  87. "z-index": "99999",
  88. "font-size": "18px",
  89. "color": "#FFFFFF",
  90. "text-align": "center",
  91. })
  92. $('.no-ne-text').css({
  93. "margin-top": "24%",
  94. })
  95. }
  96. canvas_bak.width = canvasWidth;
  97. canvas_bak.height = canvasHeight;
  98. canvas = document.getElementById("mainScreen-main");
  99. canvasTop = $(canvas_bak).offset().top
  100. canvasLeft = $(canvas_bak).offset().left;
  101. // context_bak = canvas_bak.getContext('2d');
  102. $(canvas_bak).css("z-index", 999);
  103. };
  104. wsss.onclose = function(event) {
  105. };
  106. wsss.onerror = function(event) {
  107. };
  108. //画图形
  109. var draw_graph = function(graphType, obj) {
  110. //把蒙版放于画板上面
  111. //$("#canvas_bak").css("z-index",1);
  112. $("#container").css("z-index", 30);
  113. $("#dedit").css("z-index", 20);
  114. //先画在蒙版上 再复制到画布上
  115. chooseImg(obj);
  116. var canDraw = false;
  117. var startX;
  118. var startY;
  119. //鼠标按下获取 开始xy开始画图
  120. var mousedown = function(e) {
  121. //
  122. //横屏
  123. if(resolving == 1) {
  124. // var ping = {
  125. // "data": {
  126. // "fingerList": [{
  127. // "action": 0,
  128. // "x": e.offsetX * 2,
  129. // "y": e.offsetY * 2.3
  130. // }]
  131. // },
  132. // "event": "0"
  133. // }
  134. var ping = {"data":{"action":0,"count":1,"pointerId":0,"x":e.offsetX * 2,"y":e.offsetY * 2.3},"event":"0"}
  135. } else if(resolving == 0) {
  136. // var ping = {
  137. // "data": {
  138. // "fingerList": [{
  139. // "action": 0,
  140. // "x": e.offsetX * 1.422,
  141. // "y": e.offsetY * 1.3
  142. // }]
  143. // },
  144. // "event": "0"
  145. // }
  146. var ping = {"data":{"action":0,"count":1,"pointerId":0,"x":e.offsetX * 1.422,"y":e.offsetY * 1.3},"event":"0"}
  147. }
  148. wsss.send(JSON.stringify(ping));
  149. e = e || window.event;
  150. /*startX = e.clientX - canvasLeft;
  151. startY = e.clientY - canvasTop;*/
  152. // console.log('鼠标按下获取:x',e.clientX-canvasLeft,'y:',e.clientY - canvasTop)
  153. console.log('---当前的偏移-:x', resolving) //offsetX
  154. console.log('11111:x', e.clientX, '2222222y:', e.clientY) //offsetX
  155. console.log('offsetX:x', e.offsetX * 1.422, 'offsetY:', e.offsetY * 1.3) //offsetX
  156. console.log(e)
  157. canDraw = true;
  158. };
  159. //鼠标离开 把蒙版canvas的图片生成到canvas中
  160. var mouseup = function(e) {
  161. e = e || window.event;
  162. // startX = e.clientX - canvasLeft;
  163. // startY = e.clientY - canvasTop;
  164. // console.log('鼠标离开>>>',e.clientX - canvasLeft)
  165. if(resolving == 1) {
  166. var ping = {
  167. "data": {
  168. "fingerList": [{
  169. "action": 0,
  170. "x": e.offsetX * 2,
  171. "y": e.offsetY * 2.3
  172. }]
  173. },
  174. "event": "1"
  175. }
  176. var ping = {"data":{"action":1,"count":1,"pointerId":0,"x":e.offsetX * 2,"y":e.offsetY * 2.3},"event":"1"}
  177. } else if(resolving == 0) {
  178. // var ping = {
  179. // "data": {
  180. // "fingerList": [{
  181. // "action": 0,
  182. // "x": e.offsetX * 1.422,
  183. // "y": e.offsetY * 1.3
  184. // }]
  185. // },
  186. // "event": "1"
  187. // }
  188. var ping = {"data":{"action":1,"count":1,"pointerId":0,"x":e.offsetX * 1.422,"y":e.offsetY * 1.3},"event":"1"}
  189. }
  190. wsss.send(JSON.stringify(ping));
  191. canDraw = false;
  192. };
  193. //清空层 云手机超出屏幕的开关
  194. var clearContext = function(type) {
  195. canDraw = false;
  196. }
  197. // 鼠标移动
  198. var mousemove = function(e) {
  199. // console.log('鼠标移动7>>>','X:',e.clientX,'Y:',e.clientY)
  200. e = e || window.event;
  201. var x = e.clientX - canvasLeft;
  202. var y = e.clientY - canvasTop;
  203. //方块 4条直线搞定
  204. if(graphType == 'square') {
  205. if(canDraw) {}
  206. //直线
  207. } else if(graphType == 'line') {} else if(graphType == 'pencil') {
  208. if(canDraw) {
  209. // context_bak.lineTo(e.clientX - canvasLeft ,e.clientY - canvasTop);
  210. // context_bak.stroke();
  211. if(resolving == 1) {
  212. // var ping = {
  213. // "data": {
  214. // "fingerList": [{
  215. // "action": 0,
  216. // "x": e.offsetX * 2,
  217. // "y": e.offsetY * 2.3
  218. // }]
  219. // },
  220. // "event": "2"
  221. // }
  222. var ping = {"data":{"action":2,"count":1,"pointerId":0,"x":e.offsetX * 2,"y":e.offsetY * 2.3},"event":"2"}
  223. } else if(resolving == 0) {
  224. // var ping = {
  225. // "data": {
  226. // "fingerList": [{
  227. // "action": 0,
  228. // "x": e.offsetX * 1.422,
  229. // "y": e.offsetY * 1.3
  230. // }]
  231. // },
  232. // "event": "2"
  233. // }
  234. var ping = {"data":{"action":2,"count":1,"pointerId":0,"x":e.offsetX * 1.422,"y":e.offsetY * 1.3},"event":"2"}
  235. }
  236. wsss.send(JSON.stringify(ping));
  237. }
  238. //圆 未画得时候 出现一个小圆
  239. } else if(graphType == 'circle') {} else if(graphType == 'handwriting') {
  240. var hwSize = 1;
  241. if(canDraw) {} else {}
  242. //橡皮擦 不管有没有在画都出现小方块 按下鼠标 开始清空区域
  243. } else if(graphType == 'rubber') {}
  244. };
  245. //鼠标离开区域以外 除了涂鸦 都清空
  246. var mouseout = function() {
  247. if(graphType != 'handwriting') {
  248. clearContext();
  249. }
  250. }
  251. $(canvas_bak).unbind();
  252. $(canvas_bak).bind('mousedown', mousedown);
  253. $(canvas_bak).bind('mousemove', mousemove);
  254. $(canvas_bak).bind('mouseup', mouseup);
  255. $(canvas_bak).bind('mouseout', mouseout);
  256. }
  257. //选择功能按钮 修改样式
  258. function chooseImg(obj) {
  259. }