draw.js 7.4 KB

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