imgdrawing_wev8.js
9.98 KB
!function(a,i){document.IMGDRAWLOADED||("function"==typeof define&&(define.amd||define.cmd)?define("imgdrawing",function(e){return i(a,e)}):a.ImgDrawing=i(a,{}))}(this,function(e,a){var r,l,o,c,v,h="WebkitAppearance"in document.documentElement.style||void 0!==document.webkitHidden,w=5,g="#000",f="line",p=new Array,u="",b=!0,m="draw",A="imgdrawing",C="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAANSURBVBhXY/j///9/AAn7A/0FQ0XKAAAAAElFTkSuQmCC",W=$(window).width(),k=$(window).height()-36,T=0,M=0,E=0,P=!1;function j(){if(0==$("#canvas",o).length){var e='<canvas id="canvas" width="'+2*W+'" height="'+2*k+'" style="margin-top:'+T+"px;margin-left:"+M+"px;width:"+W+"px;height:"+k+'px;"></canvas>';o.append(e),i(),t()}return $("#canvas",o)[0]}function I(){return j().getContext("2d")}function S(e){r.removeClass("slideup-in"),r.addClass("slideup-out"),r.find(".wev-drawing-tip").removeClass("show"),setTimeout(function(){"function"==typeof e&&e.call(this)},250)}function n(e,a){var i=new Image;i.onload=function(){o.removeClass("_loading");var e=j().getContext("2d");e.drawImage(i,0,0,2*W,2*k),e.strokeStyle=g,e.lineWidth=w,a&&a()},i.src=e}function s(e,a,i,t,n){var s=n<t?1/t:1/n;e.beginPath(),e.moveTo(a+t,i);for(var d=0;d<2*Math.PI;d+=s)e.lineTo(a+t*Math.cos(d),i+n*Math.sin(d));e.closePath(),e.stroke(),"eraser"==m&&e.fill()}function L(e,a){var i,t;t=e,"[object String]"!=Object.prototype.toString.call(t)||0!=(t=t.toLowerCase()).indexOf("http:")&&0!=t.indexOf("https:")&&0!=t.indexOf("/")?(i=e,"[object String]"==Object.prototype.toString.call(i)&&-1!=(i=i.toLowerCase()).indexOf("base64,")&&(navigator.userAgent.match(/iPhone/i)||navigator.userAgent.match(/iPad/i)?ImageOrientationFix({image:e,imgType:"base64",onFix:function(e){n(e,a)}}):n(e,a))):n(e,a)}function D(){var e=j().toDataURL();p.push(e),b=!1}function R(){c.hide(),v.hide()}a.hide=function(){R(),S(function(){o.html("")})};var i=function(){var i=0,t=!1,e=j(),n=e.getContext("2d");e.addEventListener("touchstart",function(e){var a=e.targetTouches;if(t=a&&2===a.length)return!1;i=o[0].scrollTop,x=e.changedTouches[0].pageX,"handwriting"==A?y=e.changedTouches[0].pageY-72-T:(y=e.changedTouches[0].pageY-36-E-T+i,x-=M),x*=2,y*=2,x1=x,y1=y,"line"==f&&(n.beginPath(),n.moveTo(x,y))},!1),e.addEventListener("touchmove",function(e){if(t)return!1;e.preventDefault(),x1=e.changedTouches[0].pageX,"handwriting"==A?y1=e.changedTouches[0].pageY-72-T:(y1=e.changedTouches[0].pageY-36-E-T+i,x1-=M),x1*=2,y1*=2,"line"==f&&(n.lineTo(x1,y1),n.stroke()),P=!0},!1),e.addEventListener("touchend",function(e){t||(x1-x!=0&&y1-y!=0&&("rectangle"==f&&("eraser"==m?n.fillRect(x<x1?x:x1,y<y1?y:y1,Math.abs(x1-x),Math.abs(y1-y)):n.strokeRect(x<x1?x:x1,y<y1?y:y1,Math.abs(x1-x),Math.abs(y1-y))),"circle"==f&&s(n,(x1-x)/2+x,(y1-y)/2+y,Math.abs((x1-x)/2),Math.abs((y1-y)/2))),D())},!1)},t=function(){var a=0,e=j(),i=e.getContext("2d"),t=0;e.addEventListener("mousedown",function(e){a=o[0].scrollTop,t=1,x=e.pageX,"handwriting"==A?y=e.pageY-72-T:(y=e.pageY-36-E-T+a,x-=M),x*=2,y*=2,x1=x,y1=y,"line"==f&&(i.beginPath(),i.moveTo(x,y))},!1),e.addEventListener("mousemove",function(e){t&&(x1=e.pageX,"handwriting"==A?y1=e.pageY-72-T:(y1=e.pageY-36-E-T+a,x1-=M),x1*=2,y1*=2,"line"==f&&(i.lineTo(x1,y1),i.stroke())),P=!0},!1),document.addEventListener("mouseup",function(e){t&&x1-x!=0&&y1-y!=0&&("rectangle"==f&&("eraser"==m?i.fillRect(x<x1?x:x1,y<y1?y:y1,Math.abs(x1-x),Math.abs(y1-y)):i.strokeRect(x<x1?x:x1,y<y1?y:y1,Math.abs(x1-x),Math.abs(y1-y))),"circle"==f&&s(i,(x1-x)/2+x,(y1-y)/2+y,Math.abs((x1-x)/2),Math.abs((y1-y)/2))),t&&D(),t=0},!1)},Y={};return a.draw=function(e){if(Y.type="",$.extend(Y,e),u=Y.data||C,p=new Array,0==(r=$(".wev-drawing-win")).length){var a=['<div class="wev-drawing-win">',e.tip?'<div class="wev-drawing-tip">'+e.tip+"<span></span></div>":"",'<div class="wev-drawing-header">','<a href="javascript:void(0);" class="save-btn"></a>','<a href="javascript:void(0);" class="close-btn"></a>','<a href="javascript:void(0);" class="pen-btn selected"></a>','<a href="javascript:void(0);" class="eraser-btn"></a>','<a href="javascript:void(0);" class="undo-btn"></a>','<a href="javascript:void(0);" class="refresh-btn"></a>',"</div>",'<div class="wev-drawing-content">',"</div>",'<div class="wev-drawing-config">','<div class="wev-drawing-graph" data-type="rectangle"></div>','<div class="wev-drawing-graph" data-type="circle"></div>','<div class="wev-drawing-graph selected" data-type="line"></div>','<div class="wev-drawing-point" data-lineWidth="2"></div>','<div class="wev-drawing-point selected" data-lineWidth="5"></div>','<div class="wev-drawing-point" data-lineWidth="10"></div>','<div class="wev-drawing-color selected" data-color="#000"></div>','<div class="wev-drawing-color" data-color="red"></div>','<div class="wev-drawing-color" data-color="#fff"></div>','<div class="wev-drawing-color" data-color="green"></div>','<div class="wev-drawing-color" data-color="#ffff00"></div>','<div class="wev-drawing-color" data-color="#f31bf3"></div>',"</div>",'<div class="wev-eraser-config">','<div class="wev-eraser-point" data-lineWidth="15"></div>','<div class="wev-eraser-point" data-lineWidth="20"></div>','<div class="wev-eraser-point" data-lineWidth="25"></div>','<div class="wev-eraser-point selected" data-lineWidth="30"></div>','<div class="wev-eraser-point" data-lineWidth="35"></div>','<div class="wev-eraser-point" data-lineWidth="40"></div>','<div class="wev-eraser-point" data-lineWidth="45"></div>','<a class="wev-eraser-clean"></a>',"</div>",'<div class="wev-drawing-footer">','<a href="javascript:void(0);" class="save-btn"></a>',"</div>","</div>"].join("\n");r=$(a);var i=$("#page_view");0==i.length&&(i=$(document.body)),i.append(r),l=$(".wev-drawing-header .title",r),o=$(".wev-drawing-content",r),c=$(".wev-drawing-config",r),v=$(".wev-eraser-config",r);var t=h?"webkitAnimationEnd":"animationend";r[0].addEventListener(t,function(){$(this).hasClass("slideup-out")&&(r.hide(),r.removeClass("slideup-out"))}),$(".close-btn",r).click(function(){p=new Array,R(),S(function(){o.html("");var e=Y.callback||{};"function"==typeof e.close&&e.close.call(this)})}),$(".refresh-btn",r).click(function(){o.html(""),o.addClass("_loading"),m="draw",p=new Array,P=!1,L(u)}),$(".pen-btn",r).click(function(){var e=$(this);e.hasClass("selected")?e.removeClass("selected"):e.addClass("selected").siblings("a[class*='-btn']").removeClass("selected"),$(".wev-eraser-config",r).hide(),$(".wev-drawing-config",r).toggle(),m="draw",g=$(".wev-drawing-color.selected",r).attr("data-color")||"#000",w=parseInt($(".wev-drawing-point.selected",r).attr("data-lineWidth")),f=$(".wev-drawing-graph.selected",r).attr("data-type")||"line";var a=I();a.beginPath(),a.strokeStyle=g,a.lineWidth=w}),$(".undo-btn",r).click(function(e){b||(p.pop(),b=!0),0==p.length&&(P=!1),L(p.pop()||u)}),$(".eraser-btn",r).click(function(){var e=$(this);e.hasClass("selected")?e.removeClass("selected"):e.addClass("selected").siblings("a[class*='-btn']").removeClass("selected"),$(".wev-drawing-config",r).hide(),$(".wev-eraser-config",r).toggle(),m="eraser",g="#fff",w=parseInt($(".wev-eraser-point.selected",r).attr("data-lineWidth")),f="line";var a=I();a.beginPath(),a.lineWidth=w,a.strokeStyle=g}),$(".save-btn",r).click(function(){p=new Array,R(),S(function(){var e=P?j().toDataURL():u;o.html("");var a=Y.callback||{};"function"==typeof a.done&&(P||u!=C?a.done.call(this,e):a.close.call(this))})}),$(".wev-drawing-graph",r).click(function(){$(this).hasClass("selected")||($(this).siblings(".wev-drawing-graph").removeClass("selected"),$(this).addClass("selected"),f=$(this).attr("data-type"))}),$(".wev-drawing-point",r).click(function(){if(!$(this).hasClass("selected")){$(this).siblings(".wev-drawing-point").removeClass("selected"),$(this).addClass("selected"),w=parseInt($(this).attr("data-lineWidth"));var e=I();e.beginPath(),e.lineWidth=w}}),$(".wev-eraser-point",r).click(function(){if(!$(this).hasClass("selected")){$(this).siblings(".wev-eraser-point").removeClass("selected"),$(this).addClass("selected"),w=parseInt($(this).attr("data-lineWidth"));var e=I();e.beginPath(),e.lineWidth=w}}),$(".wev-drawing-color",r).click(function(){if(!$(this).hasClass("selected")){$(this).siblings(".wev-drawing-color").removeClass("selected"),$(this).addClass("selected"),g=$(this).attr("data-color");var e=I();e.beginPath(),e.strokeStyle=g}}),$(".wev-eraser-clean",r).click(function(){D(),L(C)})}if(A=Y.type||"imgdrawing",M=T=0,"handwriting"==A)$(".eraser-btn",r).show(),W=$(window).width()-6,k=($(window).height()-72)/2,r.addClass("handwriting").removeClass("imgdrawing");else{winW=$(window).width(),winH=$(window).height()-36;var n=Y.width||winW,s=Y.height||winH;$(".eraser-btn",r).hide(),winW<winH?(W=winW,k=parseInt(W*(s/n))):(k=winH,W=parseInt(k*(n/s))),k<winH&&(T=(winH-k)/2),W<winW&&(M=(winW-W)/2),r.addClass("imgdrawing").removeClass("handwriting")}c.show(),l.html(Y.title||""),o.addClass("_loading"),r.css("visibility","hidden"),r.show(),function(){v.hide(),m="draw",g="handwriting"==A?"#000":"red",w=5,f="line";var e=I();e.beginPath(),e.strokeStyle=g,e.lineWidth=w,$(".wev-drawing-color[data-color='"+g+"']",r).addClass("selected").siblings(".wev-drawing-color").removeClass("selected"),$(".wev-drawing-point[data-lineWidth='5']",r).addClass("selected").siblings(".wev-drawing-point").removeClass("selected"),$(".wev-drawing-graph[data-type='line']",r).addClass("selected").siblings(".wev-drawing-graph").removeClass("selected"),$(".wev-eraser-point[data-lineWidth='30']",r).addClass("selected").siblings(".wev-eraser-point").removeClass("selected"),$("a.pen-btn",r).addClass("selected").siblings("a[class*='-btn']").removeClass("selected")}(),setTimeout(function(){r.addClass("slideup-in"),r.css("visibility","visible"),E=c.height()},1);var d=0;navigator.userAgent.match(/iPhone/i)||navigator.userAgent.match(/iPad/i)||(d=300),setTimeout(function(){L(Y.data||C,function(){if(!("handwriting"==A)){var e=o[0],a=e.scrollHeight;e.offsetHeight<a&&r.find(".wev-drawing-tip").addClass("show").on("click","span",function(e){$(e.liveFired).removeClass("show")})}})},d)},document.IMGDRAWLOADED=!0,a});