forked from fahrenheit-marketing/jquery-canvas-area-draw
-
Notifications
You must be signed in to change notification settings - Fork 3
/
jquery.canvasAreaDraw.min.js
1 lines (1 loc) · 6.89 KB
/
jquery.canvasAreaDraw.min.js
1
(function(e){e.widget("custom.htmlimagemap",{options:{name:"map",imageUrl:"",areas:[{href:"",coords:[]}],onMove:function(e){},onUpdateArea:function(e){}},_create:function(){var t=this;this.__activeArea=0;this.__activeCoord=undefined;this.__settings=undefined;this.__$canvas=undefined;this.__ctx=undefined;this.__image=new Image;this.__$canvas=e("<canvas>");if(!this.__$canvas[0].getContext){this.__$canvas[0]=G_vmlCanvasManager.initElement(this.__$canvas[0])}this.__ctx=this.__$canvas[0].getContext("2d");e(this.element).append(this.__$canvas);e(this.__$canvas).on("mousedown",function(e){t.__mousedown(e)});e(this.__$canvas).on("contextmenu",function(e){t.__rightclick(e)});e(this.__$canvas).on("mouseup",function(e){t.__stopdrag(e)});e(this.__$canvas).on("mouseleave",function(e){t.__stopdrag(e)});this.setImageUrl(this.options.imageUrl)},__redraw:function(){e(this.__$canvas[0]).attr("height",this.__image.height).attr("width",this.__image.width);e(this.__$canvas[0]).css("height",this.__image.height+"px").css("width",this.__image.width+"px");this.__$canvas[0].width=this.__image.width;this.__$canvas[0].height=this.__image.height;this.__draw()},__move:function(t){t.offsetX=t.pageX-e(this.__$canvas[0]).offset().left;t.offsetY=t.pageY-e(this.__$canvas[0]).offset().top;if(e.browser.msie&&parseFloat(e.browser.version)<8){t.offsetY=t.offsetY-e("body").scrollTop()}this.options.areas[this.__activeArea].coords[this.__activeCoord]=Math.round(t.offsetX);this.options.areas[this.__activeArea].coords[this.__activeCoord+1]=Math.round(t.offsetY);this.__redraw();this.options.onMove(this.options.areas[this.__activeArea])},__stopdrag:function(){e(this.element).off("mousemove");this.__activeCoord=null;this.options.onUpdateArea(this.options.areas[this.__activeArea])},__rightclick:function(t){t.preventDefault();t.offsetX=t.pageX-e(this.__$canvas[0]).offset().left;t.offsetY=t.pageY-e(this.__$canvas[0]).offset().top;var n=t.offsetX,r=t.offsetY;if(e.browser.msie&&parseFloat(e.browser.version)<8){r=t.offsetY-e("body").scrollTop()}for(var i=0;i<this.options.areas[this.__activeArea].coords.length;i+=2){dis=Math.sqrt(Math.pow(n-this.options.areas[this.__activeArea].coords[i],2)+Math.pow(r-this.options.areas[this.__activeArea].coords[i+1],2));if(dis<6){this.options.areas[this.__activeArea].coords.splice(i,2);this.options.onUpdateArea(this.options.areas[this.__activeArea]);this.__redraw();return false}}return false},__mousedown:function(n){var r,i,s,o,u=this.options.areas[this.__activeArea].coords.length;var a=this;if(n.which===3){return false}n.preventDefault();n.offsetX=n.pageX-e(this.__$canvas[0]).offset().left;n.offsetY=n.pageY-e(this.__$canvas[0]).offset().top;r=n.offsetX;i=n.offsetY;if(e.browser.msie&&parseFloat(e.browser.version)<8){i=n.offsetY-e("body").scrollTop()}for(var f=0;f<this.options.areas[this.__activeArea].coords.length;f+=2){s=Math.sqrt(Math.pow(r-this.options.areas[this.__activeArea].coords[f],2)+Math.pow(i-this.options.areas[this.__activeArea].coords[f+1],2));if(s<6){this.__activeCoord=f;e(this.element).on("mousemove",function(e){a.__move(e)});return false}}for(var f=0;f<this.options.areas[this.__activeArea].coords.length;f+=2){if(f>1){o=t(r,i,this.options.areas[this.__activeArea].coords[f],this.options.areas[this.__activeArea].coords[f+1],this.options.areas[this.__activeArea].coords[f-2],this.options.areas[this.__activeArea].coords[f-1],true);if(o<6){u=f}}}this.options.areas[this.__activeArea].coords.splice(u,0,Math.round(r),Math.round(i));this.__activeCoord=u;e(this.element).on("mousemove",function(e){a.__move(e)});this.options.onUpdateArea(this.options.areas[this.__activeArea]);this.__redraw();return false},__draw:function(){this.__ctx.canvas.width=this.__ctx.canvas.width;this.__ctx.globalCompositeOperation="source-over";for(var e=0;e<this.options.areas.length;e++){if(e!=this.__activeArea){this.__drawArea(e)}}this.__drawArea(this.__activeArea)},__drawArea:function(e){var t="";var n="";var r="";var i="";if(e==this.__activeArea){t="rgb(255,20,20)";n="rgba(255,0,0,0.3)";r="rgb(255,20,20)";i="rgb(255,255,255)"}else{t="rgb(50,50,50)";n="rgba(50,50,50,0.3)";r="rgb(50,50,50)";fillCoordRgba="rgba(50,50,50,0.3)"}if(this.options.areas[e].coords.length<2){return false}this.__ctx.lineWidth=1;this.__ctx.beginPath();this.__ctx.moveTo(this.options.areas[e].coords[0],this.options.areas[e].coords[1]);for(var s=0;s<this.options.areas[e].coords.length;s+=2){if(this.options.areas[e].coords.length>2&&s>1){this.__ctx.lineTo(this.options.areas[e].coords[s],this.options.areas[e].coords[s+1])}}this.__ctx.closePath();this.__ctx.strokeStyle=t;this.__ctx.stroke();this.__ctx.fillStyle=n;this.__ctx.fill();this.__ctx.strokeStyle=r;this.__ctx.fillStyle=i;for(var s=0;s<this.options.areas[e].coords.length;s+=2){this.__ctx.strokeRect(this.options.areas[e].coords[s]-2,this.options.areas[e].coords[s+1]-2,4,4);this.__ctx.fillRect(this.options.areas[e].coords[s]-2,this.options.areas[e].coords[s+1]-2,4,4)}},__fixActiveAreaIndex:function(){if(typeof this.options.areas[this.__activeArea]=="undefined"){if(typeof this.options.areas[this.__activeArea-1]!="undefined"){this.setActiveAreaIndex(this.__activeArea-1)}else{this.setActiveAreaIndex(this.__activeArea)}}},removeAll:function(){this.options.areas=[];this.__fixActiveAreaIndex();this.__redraw()},getAreas:function(){return this.options.areas},setAreas:function(e){this.options.areas=e;this.setActiveAreaIndex(0);this.__redraw()},getArea:function(e){return this.options.areas[e]},setArea:function(e,t){this.options.areas[e]=t;this.__redraw()},removeArea:function(e){this.options.areas.splice(e,1);this.__fixActiveAreaIndex();this.__redraw()},resetArea:function(e){this.setArea(e,{href:"",coords:[]});this.options.onUpdateArea(this.options.areas[e]);this.__redraw()},getActiveArea:function(){return this.options.areas[this.__activeArea]},setActiveArea:function(e){this.setArea(this.__activeArea,e)},resetActiveArea:function(){this.resetArea(this.__activeArea)},removeActiveArea:function(){this.removeArea(this.__activeArea)},getActiveAreaIndex:function(){return this.__activeArea},setActiveAreaIndex:function(e){if(e<0){return}this.__activeArea=e;if(typeof this.options.areas[e]=="undefined"){this.resetArea(e)}this.__redraw()},setImageUrl:function(t){var n=this;this.options.imageUrl=t;var r=function(){e(n.__$canvas).css({background:"url("+n.__image.src+")"});n.__redraw()};var i=function(){if(n.__image.complete!=null&&n.__image.complete==true){r();return}setTimeout(i,500)};e(this.__image).load(r);i();this.__image.src=t},getImageUrl:function(){return this.options.imageUrl}});var t=function(e,t,n,r,i,s,o){function u(e,t,n,r){return Math.sqrt((e-=n)*e+(t-=r)*t)}if(o&&!(o=function(e,t,n,r,i,s){if(!(i-n))return{x:n,y:t};else if(!(s-r))return{x:e,y:r};var o,u=-1/((s-r)/(i-n));return{x:o=(i*(e*u-t+r)+n*(e*-u+t-s))/(u*(i-n)+r-s),y:u*o-u*e+t}}(e,t,n,r,i,s),o.x>=Math.min(n,i)&&o.x<=Math.max(n,i)&&o.y>=Math.min(r,s)&&o.y<=Math.max(r,s))){var a=u(e,t,n,r),f=u(e,t,i,s);return a>f?f:a}else{var l=r-s,c=i-n,h=n*s-r*i;return Math.abs(l*e+c*t+h)/Math.sqrt(l*l+c*c)}}})(jQuery)