index.js 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719
  1. $(document).ready(function(){
  2. //var imgsrc = "media/1517533995690XZB2018RJYYB01021_1.jpg";
  3. var imgsrc = $(".imgsview img:first").attr("src");
  4. var canvasWidth = $(".imgsview img:first").get(0).naturalWidth/3;
  5. var canvasHeight = $(".imgsview img:first").get(0).naturalHeight/3;
  6. //alert(canvasWidth);
  7. //alert(canvasHeight);
  8. $("#pureCanvas").attr("data-width");
  9. $("#pureCanvas").attr("data-height");
  10. //检测按键
  11. var keyCode = null;
  12. var cailiao_flag = false;
  13. //document.onkeydown=function(event){
  14. // var e = event || window.event || arguments.callee.caller.arguments[0];
  15. // keyCode = e.keyCode;
  16. //}
  17. //document.onkeyup=function(event){
  18. // var e = event || window.event || arguments.callee.caller.arguments[0];
  19. // keyCode = null;
  20. //}
  21. document.addEventListener("keydown",function(event){
  22. var e = event || window.event || arguments.callee.caller.arguments[0];
  23. keyCode = e.keyCode;
  24. });
  25. document.addEventListener("keyup",function(event){
  26. var e = event || window.event || arguments.callee.caller.arguments[0];
  27. keyCode = e.keyCode;
  28. keyCode = null;
  29. });
  30. // 切割出的图片可切割
  31. $("#paperpiecesul").sortable();
  32. // $(".clean_ul").each(function(){
  33. // $(this).sortable();
  34. // });
  35. //放大缩小滑块
  36. $( "#slider" ).slider();
  37. function initCanvas(){
  38. //实例化canvas
  39. $("#pureCanvas").pureCanvas('setting', 'backgroundImage', {
  40. width:canvasWidth,
  41. height:canvasHeight,
  42. imageSrc: imgsrc,
  43. callback: function(imageInfo){
  44. var data = imageInfo;
  45. data.eventType = 'bg';
  46. }
  47. });
  48. $("#pureCanvas").pureCanvas('Rectangle', 'type', 'Rectangle');
  49. }
  50. initCanvas();
  51. //$("#pureCanvas").pureCanvas('Rectangle', 'type', 'Rectangle');
  52. function getImgData(_cropCanvas,x,y,x1,y1){
  53. //var dataImg = bb.getImageData(x,y,x1-x,y1-y)
  54. var bb = _cropCanvas.getContext('2d');
  55. var dataImg = bb.getImageData(50,50,500,300)
  56. console.log(dataImg)
  57. // 将图像放回画布
  58. var canvas2 = document.createElement("canvas")
  59. canvas2.width = 500;
  60. canvas2.height = 300;
  61. var ctx2 = canvas2.getContext("2d")
  62. ctx2.putImageData(dataImg,0,0,0,0,canvas2.width,canvas2.height);
  63. // 试卷url
  64. var imgurl = canvas2.toDataURL("image/jpeg", 1)
  65. imgtmp = document.createElement("img");
  66. imgtmp.setAttribute('src',imgurl);
  67. document.getElementById("imgsview").append(imgtmp);
  68. }
  69. //图像裁剪
  70. function crop(imgsrc,x,y,x1,y1){
  71. x = parseInt(x)*6.37;
  72. y = parseInt(y)*6.37;
  73. x1 = parseInt(x1)*6.37;
  74. y1 = parseInt(y1)*6.37;
  75. if(!imgsrc){return;}
  76. var img = new Image;
  77. img.setAttribute("crossOrigin",'anonymous');
  78. img.src = imgsrc;
  79. var _cropCanvas = document.createElement('canvas');
  80. _cropCanvas.width = img.width;
  81. _cropCanvas.height = img.height;
  82. var ctx = _cropCanvas.getContext('2d');
  83. img.onload = function () {
  84. ctx.drawImage(img,0,0,img.width,img.height);
  85. var dataImg = ctx.getImageData(x,y,x1-x,y1-y)
  86. console.log(dataImg)
  87. // 将图像放回画布
  88. var canvas2 = document.createElement("canvas")
  89. canvas2.width = x1-x;
  90. canvas2.height = y1-y;
  91. var ctx2 = canvas2.getContext("2d")
  92. ctx2.putImageData(dataImg,0,0,0,0,canvas2.width,canvas2.height);
  93. // 试卷url
  94. var imgurl = canvas2.toDataURL("image/jpeg", 1)
  95. imgtmp = document.createElement("img");
  96. imgtmp.setAttribute('src',imgurl);
  97. imgtmp.setAttribute('width','100%');
  98. document.getElementById("imgsview").append(imgtmp);
  99. }
  100. }
  101. // 快捷工具条切换
  102. $("[data-pure-canvas-option]").on('click input change', function(e){
  103. var $this = $(this);
  104. if($this.attr('type') == 'file' && !$this.val()){
  105. return;
  106. }
  107. var optionName = $this.attr('data-pure-canvas-option');
  108. var optionType = $this.attr('data-pure-canvas-type');
  109. var value;
  110. if($this.attr('data-pure-canvas-value') == 'rate'){
  111. value = {'type': 'rate', 'rateVal': $this.val()};
  112. }
  113. else if(optionType == 'type' || $this.attr('data-pure-canvas-value')){
  114. value = $this.attr('data-pure-canvas-value');
  115. }
  116. else if(optionType == 'backgroundImage'){
  117. value = {
  118. width:canvasWidth,
  119. height:canvasHeight,
  120. imageSrc: $this.prev().val(),
  121. callback: function(imageInfo){
  122. var data = imageInfo;
  123. data.eventType = 'bg';
  124. PureWebSocket.send(data);
  125. }
  126. }
  127. }
  128. else{
  129. value = $this.val();
  130. }
  131. $("#pureCanvas").pureCanvas(optionName, optionType, value);
  132. });
  133. //切换背景图
  134. $("#imgsview img").on('click input change', function(e){
  135. var $this = $(this);
  136. if($this.attr('type') == 'file' && !$this.val()){
  137. return;
  138. }
  139. var optionName = $this.attr('data-pure-canvas-option');
  140. var optionType = $this.attr('data-pure-canvas-type');
  141. var value;
  142. if($this.attr('data-pure-canvas-value') == 'rate'){
  143. value = {'type': 'rate', 'rateVal': $this.val()};
  144. }
  145. else if(optionType == 'type' || $this.attr('data-pure-canvas-value')){
  146. value = $this.attr('data-pure-canvas-value');
  147. }
  148. else if(optionType == 'backgroundImage'){
  149. value = {
  150. width:canvasWidth,
  151. height:canvasHeight,
  152. imageSrc: $this.attr("src"),
  153. callback: function(imageInfo){
  154. var data = imageInfo;
  155. data.eventType = 'bg';
  156. // PureWebSocket.send(data);
  157. }
  158. }
  159. }
  160. else{
  161. value = $this.val();
  162. }
  163. $("#pureCanvas").pureCanvas(optionName, optionType, value);
  164. imgsrc = $this.attr("src");
  165. });
  166. //获取画矩形结果
  167. $("#pureCanvas").on('complate.draw.pureCanvas', function(e){
  168. var data = e.drawData;
  169. var point = data.points.split(",")[0].split(" ").concat(data.points.split(",")[1].split(" "));
  170. console.log(point);
  171. var timeStamp = e.timeStamp;
  172. var src = imgsrc;
  173. // 切割单题
  174. var _this = $("#paperpieces .cut_imgview_active");
  175. var point_site = check_point_site();
  176. //
  177. var toolkit_type = get_toolkit_type();
  178. // 单题切割
  179. console.log(keyCode);
  180. if(toolkit_type=='danti'){
  181. var imgviewer = cut_single(src,point);
  182. //如果cailiao_flag 且上一题有材料
  183. if(cailiao_flag&&_this.prev(".cut_img_box_li").find(".cailiao_clean_ul").length){
  184. //_this.prev(".cut_img_box_li").find(".cailiao_clean_ul").clone().insertBefore(_this.find(".clean_ul"));
  185. //_this.prev(".cut_img_box_li").find(".cailiao_num").clone().insertBefore(_this.find(".clean_ul"));
  186. _this.prev(".cut_img_box_li").find(".cailiao_clean_ul").clone().insertBefore(imgviewer.find(".clean_ul"));
  187. _this.prev(".cut_img_box_li").find(".cailiao_num").clone().insertBefore(imgviewer.find(".clean_ul"));
  188. }
  189. //
  190. if(keyCode==17){
  191. // 如果当前激活状态在最后一位则转移指针特性位置
  192. if($(_this).hasClass("forward_point")){
  193. $(_this).removeClass("forward_point");
  194. if($("#paperpieces .forward_point").length==0){
  195. $(_this).after(gen_forward_point());
  196. // 移动指针
  197. change_forward_point();
  198. }
  199. }
  200. if($(_this).find(".cut_imgview").length<1){
  201. $(_this).html(imgviewer.html());
  202. }else{
  203. $(_this).find(".clean_ul").append($(imgviewer).find(".cut_imgview"));
  204. }
  205. }else{
  206. // 移动指针
  207. change_forward_point();
  208. // 指针在结尾
  209. if($(_this).hasClass("forward_point")){
  210. $(".forward_point").before(imgviewer);
  211. // 滚动条滚动
  212. $("#paperpieces").scrollTop($("#paperpieces")[0].scrollHeight);
  213. }else{
  214. imgviewer.find("input").attr("value",_this.find("input").val());
  215. _this.html(imgviewer.html());
  216. }
  217. }
  218. // 切小题
  219. }else if(toolkit_type=='xiaoti'){
  220. var imgviewer = cut_mul_li(src,point);
  221. //如果cailiao_flag 且上一题有材料
  222. if(cailiao_flag&&_this.prev(".cut_img_box_li").find(".cailiao_clean_ul").length){
  223. //_this.prev(".cut_img_box_li").find(".cailiao_clean_ul").clone().insertBefore(_this.find(".clean_ul"));
  224. //_this.prev(".cut_img_box_li").find(".cailiao_num").clone().insertBefore(_this.find(".clean_ul"));
  225. if(!_this.find(".cailiao_clean_ul").length){
  226. _this.prev(".cut_img_box_li").find(".cailiao_clean_ul").clone().insertBefore(imgviewer.find(".clean_ul"));
  227. _this.prev(".cut_img_box_li").find(".cailiao_num").clone().insertBefore(imgviewer.find(".clean_ul"));
  228. }
  229. }
  230. //抛弃
  231. if(keyCode==100){
  232. // 如果当前激活状态在最后一位则转移指针特性位置
  233. if($(_this).hasClass("forward_point")){
  234. $(_this).removeClass("forward_point");
  235. if($("#paperpieces .forward_point").length==0){
  236. $(_this).after(gen_forward_point());
  237. }
  238. }
  239. //
  240. if($(_this).find(".cut_imgview").length<1){
  241. $(_this).html(imgviewer.html());
  242. }else{
  243. $(_this).append($(imgviewer).find(".cut_imgview"));
  244. }
  245. }else{
  246. // 移动指针
  247. change_forward_point();
  248. // 指针在结尾
  249. if($(_this).hasClass("forward_point")){
  250. $(imgviewer).addClass("cut_imgview_active");
  251. $(".forward_point").before(imgviewer);
  252. $(_this).removeClass("cut_imgview_active");
  253. // 滚动条滚动
  254. $("#paperpieces").scrollTop($("#paperpieces")[0].scrollHeight);
  255. }else{
  256. // imgviewer.find("input").attr("value",_this.find("input").val());
  257. // _this.html(imgviewer.html());
  258. if(_this.find(".clean_ul").length){
  259. //如果原来是单题全覆盖如果是小题则增加
  260. if(_this.find(".clean_ul").find(".subqueinput").length){
  261. _this.find(".clean_ul").append(imgviewer.find(".cut_imgview"));
  262. }else{
  263. _this.find(".clean_ul").remove();
  264. _this.append(imgviewer.find(".clean_ul"));
  265. }
  266. //改成全覆盖
  267. //_this.append(imgviewer.find(".clean_ul"));
  268. }else{
  269. _this.append(imgviewer.find(".clean_ul"));
  270. }
  271. }
  272. }
  273. // 切材料
  274. }else{
  275. var imgviewer = cut_cailiao_li(src,point);
  276. // 移动指针
  277. change_forward_point();
  278. // 指针在最后
  279. if($(_this).hasClass("forward_point")){
  280. $(imgviewer).addClass("cut_imgview_active");
  281. $(_this).removeClass("cut_imgview_active");
  282. //
  283. if(_this.find(".cailiao_clean_ul").length){
  284. _this.find(".cailiao_clean_ul").append(imgviewer.find(".cut_imgview"));
  285. }else{
  286. $(".forward_point").before(imgviewer);
  287. }
  288. }else{
  289. //已存在切割好的题目
  290. if(_this.find(".clean_ul").length){
  291. //
  292. if(_this.find(".cailiao_clean_ul").length){
  293. _this.find(".cailiao_clean_ul").append(imgviewer.find(".cut_imgview"));
  294. }else{
  295. imgviewer.find(".cailiao_clean_ul").insertBefore(_this.find(".clean_ul"));
  296. }
  297. // 添加材料提示
  298. var cailiao_num = _this.find(".cailiao_clean_ul .cut_imgview").length;
  299. if(_this.find(".cailiao_num").length){
  300. _this.find(".cailiao_num").text("第"+cailiao_num+"张材料");
  301. }else{
  302. _this.append(gen_cailiao_num(cailiao_num));
  303. }
  304. }else{
  305. //
  306. if(_this.find(".cailiao_clean_ul").length){
  307. _this.find(".cailiao_clean_ul").append(imgviewer.find(".cut_imgview"));
  308. }else{
  309. _this.append(imgviewer);
  310. }
  311. }
  312. }
  313. //
  314. }
  315. //添加hover事件
  316. add_hover();
  317. //添加点击激活事件
  318. active_cut_img(imgviewer);
  319. });
  320. //
  321. //去除多余的canvas
  322. $("canvas:eq(1)").remove();
  323. $("canvas:eq(1)").remove();
  324. function check_point_site(){
  325. var _this = $("#paperpieces .cut_imgview_active");
  326. var point_site = _this.index()+1;
  327. return point_site;
  328. }
  329. //删除操作
  330. function del_myself(_this){
  331. $(_this).remove();
  332. }
  333. // 切割操作
  334. // 单题切割
  335. function cut_single(src,point){
  336. // var imgtmp = gen_single_li(src,point);
  337. var imgtmp = gen_danti(src,point);
  338. return $(imgtmp)
  339. }
  340. // 生成定位指针
  341. function gen_forward_point(){
  342. var tmp_div = document.createElement("div");
  343. var value = $("#paperpieces li").length+1;
  344. var htmlstr = '<li class="forward_point cut_img_box_li"><input type="text" style="width:40px;" value='+value+' /></li>';
  345. $(tmp_div).html(htmlstr);
  346. return $(tmp_div).find(".forward_point");
  347. }
  348. //单题目li生成
  349. function gen_single_li(src,point){
  350. var imgtmp = document.createElement("li");
  351. $(imgtmp).addClass("cut_img_box_li");
  352. var sub_html = gen_cut_imgview(src,point);
  353. imgtmp.innerHTML=sub_html;
  354. return imgtmp;
  355. }
  356. // 切材料
  357. function cut_cailiao_li(src,point){
  358. // 大题号计算
  359. var queno = $("#paperpieces .cut_img_box_li").length;
  360. var tmpli = document.createElement("li");
  361. $(tmpli).addClass("cut_img_box_li");
  362. $(tmpli).append('<input type="text" class="quenoinput" value='+queno+' />');
  363. $(tmpli).append('<span type="text" class="cailiao_num">'+'第1张材料'+'</span>');
  364. var imgtmp = document.createElement("ul");
  365. // $(imgtmp).addClass("cut_img_box_li");
  366. $(imgtmp).addClass("cailiao_clean_ul");
  367. var sub_html = gen_cailiao_li(src,point);
  368. console.log(sub_html);
  369. imgtmp.innerHTML=sub_html;
  370. $(tmpli).append($(imgtmp));
  371. console.log($(tmpli).html());
  372. return $(tmpli);
  373. }
  374. // 生成材料提示
  375. function gen_cailiao_num(num){
  376. var tmp = document.createElement("div");
  377. $(tmp).append('<span type="text" class="cailiao_num">第'+num+'张材料</span>');
  378. return $(tmp).html();
  379. }
  380. // 生成材料预览
  381. function gen_cailiao_li(src,point){
  382. // var src="media/1517533995690XZB2018RJYYB01021_1.jpg";
  383. var subqueno = 1;
  384. //
  385. var _this = $("#paperpieces .cut_imgview_active");
  386. var subqueno_num = _this.find(".cailiao_clean_ul").find(".cut_imgview").length;
  387. if(keyCode==17){
  388. var subqueno = 1;
  389. if(subqueno_num<1){
  390. subqueno = subqueno_num+1;
  391. }else{
  392. subqueno = parseInt(_this.find(".cailiao_clean_ul").find(".cut_imgview:last").find(".subqueinput").val());
  393. }
  394. }else{
  395. var subqueno = 1;
  396. if(subqueno_num<1){
  397. subqueno = subqueno_num+1;
  398. }else{
  399. subqueno = parseInt(_this.find(".cailiao_clean_ul").find(".cut_imgview:last").find("input").val())+1;
  400. }
  401. }
  402. //
  403. var width = point[2]-point[0];
  404. var viewWidth=$('#paperpiecesul li:first').width();
  405. var widthRate=viewWidth/width;
  406. var background_position =(-point[0]*widthRate)+'px ' +(-point[1]*widthRate)+'px';
  407. var rate =(point[3]-point[1])/(point[2]-point[0]);
  408. // 子题号html
  409. var tmp_ul = document.createElement("ul");
  410. $(tmp_ul).addClass("clean_ul");
  411. //
  412. // var sub_html = '<input type="text" style="width:40px;position:absolute;top:-21px;left:-1px;" value='+queno+' />';
  413. var page = $("#imgsview").find(".active_green_border").attr("data-page");
  414. var sub_html = '<li class="cut_imgview" data-point="'+point.join(',')+'" data-page='+page+' data-image-type=1><input type="text" class="subqueinput" value="'+subqueno+'"/>';
  415. sub_html += '<i class="icon iconfont icon-shanchu1 del_cut_imgview"></i></li>';
  416. $(tmp_ul).html(sub_html);
  417. $(tmp_ul).find(".cut_imgview").attr('style','height:'+rate*20+'vw;background-image:url("'+src+'");background-position:'+background_position+';background-size:'+(canvasWidth*widthRate*1.01)+'px;');
  418. return $(tmp_ul).html();
  419. }
  420. // 切小题
  421. function cut_mul_li(src,point){
  422. // 大题号计算
  423. var queno = $("#paperpieces .cut_img_box_li").length;
  424. var tmpli = document.createElement("li");
  425. $(tmpli).addClass("cut_img_box_li");
  426. $(tmpli).append('<input type="text" class="quenoinput" value='+queno+' />');
  427. $(tmpli).append('<i class="icon iconfont icon-shanchu del_li"></i>');
  428. var imgtmp = document.createElement("ul");
  429. // $(imgtmp).addClass("cut_img_box_li");
  430. $(imgtmp).addClass("clean_ul");
  431. var sub_html = gen_cut_subque(src,point);
  432. console.log(sub_html);
  433. imgtmp.innerHTML=sub_html;
  434. $(tmpli).append($(imgtmp));
  435. return $(tmpli);
  436. }
  437. // 图片查看div单题
  438. function gen_cut_imgview(src,point){
  439. //裁剪
  440. // var src="media/1517533995690XZB2018RJYYB01021_1.jpg";
  441. var width = point[2]-point[0];
  442. var viewWidth=$('#paperpiecesul li:first').width();
  443. var widthRate=viewWidth/width;
  444. var background_position =(-point[0]*widthRate)+'px ' +(-point[1]*widthRate)+'px';
  445. var rate =(point[3]-point[1])/(point[2]-point[0]);
  446. //
  447. var tmp_div = document.createElement("div");
  448. var queno = $('#paperpiecesul li').length;
  449. var sub_html = '<input type="text" style="width:40px;position:absolute;top:-21px;left:-1px;" value='+queno+' />';
  450. sub_html += '<i class="icon iconfont icon-shanchu del_li"></i>';
  451. sub_html += '<div class="cut_imgview"><i class="icon iconfont icon-shanchu1 del_cut_imgview"></i></div>';
  452. $(tmp_div).html(sub_html);
  453. $(tmp_div).find(".cut_imgview").attr('style','height:'+rate*20+'vw;background-image:url("'+src+'");background-position:'+background_position+';background-size:'+(canvasWidth*widthRate*1.01)+'px;');
  454. return $(tmp_div).html();
  455. }
  456. // 生成单题
  457. function gen_danti(src,point){
  458. // 大题号计算
  459. var queno = $("#paperpieces .cut_img_box_li").length;
  460. var tmpli = document.createElement("li");
  461. $(tmpli).addClass("cut_img_box_li");
  462. $(tmpli).append('<input type="text" class="quenoinput" value='+queno+' />');
  463. $(tmpli).append('<i class="icon iconfont icon-shanchu del_li"></i>');
  464. var imgtmp = document.createElement("ul");
  465. // $(imgtmp).addClass("cut_img_box_li");
  466. $(imgtmp).addClass("clean_ul");
  467. var sub_html = gen_cut_subque(src,point,true);
  468. console.log(sub_html);
  469. imgtmp.innerHTML=sub_html;
  470. $(tmpli).append($(imgtmp));
  471. return $(tmpli);
  472. }
  473. function gen_cut_subque(src,point,flag){
  474. // 计算子题号
  475. // 当前所属题
  476. var _this = $("#paperpieces .cut_imgview_active");
  477. var subqueno_num = _this.find(".clean_ul").find(".cut_imgview").find(".subqueinput").length;
  478. if(keyCode==17){
  479. var subqueno = 1;
  480. if(subqueno_num<1){
  481. subqueno = subqueno_num+1;
  482. }else{
  483. subqueno = parseInt(_this.find(".cut_imgview:last").find("input").val());
  484. }
  485. }else{
  486. var subqueno = 1;
  487. if(subqueno_num<1){
  488. subqueno = subqueno_num+1;
  489. }else{
  490. subqueno = parseInt(_this.find(".cut_imgview:last").find("input").val())+1;
  491. }
  492. }
  493. // var src="media/1517533995690XZB2018RJYYB01021_1.jpg";
  494. var width = point[2]-point[0];
  495. var viewWidth=$('#paperpiecesul li:first').width();
  496. var widthRate=viewWidth/width;
  497. var background_position =(-point[0]*widthRate)+'px ' +(-point[1]*widthRate)+'px';
  498. var rate =(point[3]-point[1])/(point[2]-point[0]);
  499. // 子题号html
  500. var tmp_ul = document.createElement("ul");
  501. $(tmp_ul).addClass("clean_ul");
  502. //
  503. if(flag){
  504. var page = $("#imgsview").find(".active_green_border").attr("data-page");
  505. var sub_html = '<li class="cut_imgview" data-point="'+point.join(',')+'" data-page='+page+' data-image-type=0>';
  506. }else{
  507. var page = $("#imgsview").find(".active_green_border").attr("data-page");
  508. var sub_html = '<li class="cut_imgview" data-point="'+point.join(',')+'" data-page='+page+' data-image-type=0><input type="text" class="subqueinput" value="'+subqueno+'"/>';
  509. }
  510. //
  511. sub_html += '<i class="icon iconfont icon-shanchu1 del_cut_imgview" ></i></li>';
  512. $(tmp_ul).html(sub_html);
  513. $(tmp_ul).find(".cut_imgview").attr('style','height:'+rate*20+'vw;background-image:url("'+src+'");background-position:'+background_position+';background-size:'+(canvasWidth*widthRate*1.01)+'px;');
  514. return $(tmp_ul).html();
  515. }
  516. //已切割图片的hover效果
  517. function add_hover(targetimg){
  518. $(".cut_imgview").hover(function(index){
  519. $(this).css("cursor","pointer");
  520. $("#paperpieces").append('<div class="imgzoom"></div>');
  521. var style=$(this).attr("style");
  522. var top = $(this).offset().top;
  523. $('.imgzoom').attr("style",style);
  524. $('.imgzoom').css("top",top);
  525. },function(){
  526. $('.imgzoom').remove();
  527. });
  528. }
  529. // 已切割图片添加点击切换激活状态
  530. function active_cut_img(targetimg){
  531. $("#paperpieces").on("click",".cut_img_box_li",function(){
  532. $(this).addClass("cut_imgview_active");
  533. $(this).siblings().removeClass("cut_imgview_active");
  534. $(".forward_point").css("background",null);
  535. //
  536. $(".del_li").hide();
  537. $(".del_cut_imgview").hide();
  538. $(this).find(".del_li").show();
  539. $(this).find(".del_cut_imgview").show();
  540. });
  541. }
  542. //当按住ctrl键时寻找当前处于激活状态的切图插入新的切图
  543. function insert_merge(){
  544. var cur_cut_img = $("#paperpieces[class='cut_imgview_active']");
  545. }
  546. // 改变指针位置
  547. function change_forward_point(){
  548. if($("#paperpieces .cut_imgview_active").hasClass("forward_point")){
  549. var _this = $(".forward_point")
  550. var prev_img = _this.prev();
  551. if(prev_img.length>0){
  552. var point_value = parseInt(_this.find("input").val())+1;
  553. console.log(point_value);
  554. _this.find("input").val(point_value);
  555. }else{
  556. _this.find("input").val(2);
  557. }
  558. }
  559. }
  560. // 工具hover事件
  561. $("#purePallete").find("button:lt(3)").each(function(){
  562. $(this).click(function(){
  563. $(this).addClass("toolkit_active");
  564. $(this).siblings().removeClass("toolkit_active");
  565. if($(this).attr("data-type")=="cailiao"){
  566. cailiao_flag = true;
  567. }
  568. });
  569. });
  570. // 获取切割工具
  571. function get_toolkit_type(){
  572. var type = $("#purePallete").find(".toolkit_active").attr("data-type");
  573. return type;
  574. }
  575. $("#paperpieces").on("click",".cut_img_box_li",function(){
  576. $(this).addClass("cut_imgview_active");
  577. $(this).siblings().removeClass("cut_imgview_active");
  578. $(".forward_point").css("background",null);
  579. //
  580. $(".del_li").hide();
  581. $(".del_cut_imgview").hide();
  582. $(this).find(".del_li").show();
  583. $(this).find(".del_cut_imgview").show();
  584. });
  585. $("#paperpieces").on("mouseover mouseout",".cut_imgview",function(event){
  586. if(event.type=="mouseover"){
  587. $(this).css("cursor","pointer");
  588. $("#paperpieces").append('<div class="imgzoom"></div>');
  589. var style=$(this).attr("style");
  590. var top = $(this).offset().top;
  591. $('.imgzoom').attr("style",style);
  592. $('.imgzoom').css("top",top);
  593. }else if(event.type=="mouseout"){
  594. $('.imgzoom').remove();
  595. }
  596. });
  597. //$("#paperpieces").on("mouseover mouseout",".cut_imgview",function(){
  598. // alert(22222222222222);
  599. //});
  600. //删除图片
  601. $('#paperpiecesul').on('click','.del_cut_imgview',function(){
  602. $(this).parents('.cut_imgview').remove()
  603. $('.imgzoom').remove()
  604. })
  605. //删除图片
  606. $('#paperpiecesul').on('click','.del_li',function(){
  607. $(this).parents('.cut_img_box_li').remove()
  608. $('.imgzoom').remove()
  609. })
  610. //试卷图片切换
  611. $('#imgsview img').each(function(){
  612. $(this).click(function(index){
  613. $(this).addClass("active_green_border");
  614. $(this).siblings().removeClass("active_green_border");
  615. });
  616. });
  617. //全屏
  618. var openFullScreen = function() {
  619. var e = document.documentElement;
  620. if (e.requestFullscreen)
  621. e.requestFullscreen();
  622. else if (e.mozRequestFullScreen)
  623. e.mozRequestFullScreen();
  624. else if (e.webkitRequestFullScreen)
  625. e.webkitRequestFullScreen();
  626. else if ("undefined" != typeof window.ActiveXObject) {
  627. var t = new ActiveXObject("WScript.Shell");
  628. t && t.SendKeys("{F11}")
  629. }
  630. }
  631. $(".icon-quanping").click(function(){
  632. openFullScreen();
  633. });
  634. //结束材料
  635. $(".icon-msnui-poweroff").click(function(){
  636. cailiao_flag = false;
  637. });
  638. //给快捷工具栏添加hover事件
  639. $(".paint_menu button").each(function(){
  640. var _this = $(this);
  641. $(this).hover(function(){
  642. layer.tips(_this.attr("data-desc"),_this,{tips:1});
  643. });
  644. });
  645. });