forked from neshte/jquery-canvas-area-draw
-
Notifications
You must be signed in to change notification settings - Fork 1
/
jquery.canvasAreaDraw.min.js
1 lines (1 loc) · 11.6 KB
/
jquery.canvasAreaDraw.min.js
1
!function(a){a.widget("custom.htmlimagemap",{options:{name:"map",image:null,mobile:!1,imageUrl:"",mode:"",areas:[{href:"",coords:[]}],onMove:function(a){},onUpdateArea:function(a){},onSelect:function(a){}},__color:"#FF0000",__inactiveColor:"#323232",_applyHandler:function(a){var b=this.isCSMode()?this._CSMode:this,c=b[a];"function"==typeof c&&c.apply(b,[].slice.call(arguments,1))},_create:function(){var b,c=this;this.__activeArea=0,this.__activeCoord=void 0,this.__settings=void 0,this.__$canvas=void 0,this.__ctx=void 0,this.__image=this.options.image?a(this.options.image)[0]:new Image,this.__$canvas=this._initCanvas(),this.__ctx=this.__$canvas[0].getContext("2d"),a(this.element).append(this.__$canvas),a(this.__$canvas).on("mousedown",function(a){c._applyHandler("__mousedown",a)}),a(this.__$canvas).on("contextmenu",function(a){c._applyHandler("__rightclick",a)}),a(this.__$canvas).on("mouseup",function(a){c._applyHandler("__mouseup",a)}),a(this.__$canvas).on("mouseleave",function(a){c.__stopdrag(a)}),this.options.mobile&&d(this.__$canvas[0]),this.isCSMode()&&(this._CSMode.init(this),b=this._CSMode.onCanvasSizeUpdate.bind(this._CSMode)),this.setImageUrl(this.options.imageUrl,b)},_initCanvas:function(){var b=a("<canvas>");return b[0].getContext||"undefined"==typeof G_vmlCanvasManager||(b[0]=G_vmlCanvasManager.initElement(b[0])),b},_clearCtx:function(a){a.clearRect(0,0,a.canvas.width,a.canvas.height)},__redraw:function(){a(this.__$canvas[0]).attr("height",this.__image.height).attr("width",this.__image.width),a(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(b){b.offsetX=b.pageX-a(this.__$canvas[0]).offset().left,b.offsetY=b.pageY-a(this.__$canvas[0]).offset().top,a.browser.msie&&parseFloat(a.browser.version)<8&&(b.offsetY=b.offsetY-a("body").scrollTop()),this.options.areas[this.__activeArea].coords[this.__activeCoord]=Math.round(b.offsetX),this.options.areas[this.__activeArea].coords[this.__activeCoord+1]=Math.round(b.offsetY),this.__redraw(),this.options.onMove(this.options.areas[this.__activeArea])},__stopdrag:function(){a(this.element).off("mousemove"),this.__activeCoord=null,this.options.onUpdateArea(this.options.areas[this.__activeArea])},__rightclick:function(b){b.preventDefault(),b.offsetX=b.pageX-a(this.__$canvas[0]).offset().left,b.offsetY=b.pageY-a(this.__$canvas[0]).offset().top;var c=b.offsetX,d=b.offsetY;a.browser.msie&&parseFloat(a.browser.version)<8&&(d=b.offsetY-a("body").scrollTop());for(var e=0;e<this.options.areas[this.__activeArea].coords.length;e+=2)if(dis=Math.sqrt(Math.pow(c-this.options.areas[this.__activeArea].coords[e],2)+Math.pow(d-this.options.areas[this.__activeArea].coords[e+1],2)),dis<6)return this.options.areas[this.__activeArea].coords.splice(e,2),this.options.onUpdateArea(this.options.areas[this.__activeArea]),this.__redraw(),!1;return!1},__mousedown:function(c){var d,e,f,g,h=this.options.areas[this.__activeArea].coords.length,i=this;if(3===c.which)return!1;c.preventDefault(),c.offsetX=c.pageX-a(this.__$canvas[0]).offset().left,c.offsetY=c.pageY-a(this.__$canvas[0]).offset().top,d=c.offsetX,e=c.offsetY,a.browser.msie&&parseFloat(a.browser.version)<8&&(e=c.offsetY-a("body").scrollTop());for(var j=0;j<this.options.areas[this.__activeArea].coords.length;j+=2)if(f=Math.sqrt(Math.pow(d-this.options.areas[this.__activeArea].coords[j],2)+Math.pow(e-this.options.areas[this.__activeArea].coords[j+1],2)),6>f)return this.__activeCoord=j,a(this.element).on("mousemove",function(a){i.__move(a)}),!1;for(var j=0;j<this.options.areas[this.__activeArea].coords.length;j+=2)j>1&&(g=b(d,e,this.options.areas[this.__activeArea].coords[j],this.options.areas[this.__activeArea].coords[j+1],this.options.areas[this.__activeArea].coords[j-2],this.options.areas[this.__activeArea].coords[j-1],!0),6>g&&(h=j));return this.options.areas[this.__activeArea].coords.splice(h,0,Math.round(d),Math.round(e)),this.__activeCoord=h,a(this.element).on("mousemove",function(a){i.__move(a)}),this.options.onUpdateArea(this.options.areas[this.__activeArea]),this.__redraw(),!1},__mouseup:function(){this.__stopdrag(e)},__draw:function(){this.__ctx.canvas.width=this.__ctx.canvas.width,this.__ctx.globalCompositeOperation="source-over";for(var a=0;a<this.options.areas.length;a++)a!=this.__activeArea&&this.__drawArea(a);this.__drawArea(this.__activeArea)},__isArea:function(a){return this.options.areas[a].coords.length>2},__onAreaSelect:function(){"function"==typeof this.options.onSelect&&this.options.onSelect(this.__isArea(this.__activeArea)?this.__activeArea:null)},__drawArea:function(a){var b="",c="",d="",e="",f=function(a){for(var b,c=[],d=(a||"").slice(1).split(""),e=0;e<d.length;e+=2)b=d.slice(e,e+2).join(""),c.push(parseInt(b,16));return c},g=function(a,b){var c=b?"rgba(%s, %o)".replace("%o",b):"rgb(%s)";return c.replace("%s",f(a).join(","))},h=this.options.areas[a],i=a==this.__activeArea,j=(h?h.color:null)||this.getColor(),k=g(j),l=g(this.__inactiveColor),m=g(this.__inactiveColor,.3);if(i?(b=k,c=g(j,.3),d=k,e=g("#ffffff")):(b=l,c=m,d=l,fillCoordRgba=m),!this.__isArea(a))return!1;this.__ctx.lineWidth=1,this.options.areas[a].color=j,this.__ctx.beginPath(),this.__ctx.moveTo(this.options.areas[a].coords[0],this.options.areas[a].coords[1]);for(var n=0;n<this.options.areas[a].coords.length;n+=2)this.options.areas[a].coords.length>2&&n>1&&this.__ctx.lineTo(this.options.areas[a].coords[n],this.options.areas[a].coords[n+1]);this.__ctx.closePath(),this.__ctx.strokeStyle=b,this.__ctx.stroke(),this.__ctx.fillStyle=c,this.__ctx.fill(),this.__ctx.strokeStyle=d,this.__ctx.fillStyle=e;for(var n=0;n<this.options.areas[a].coords.length;n+=2)this.__ctx.strokeRect(this.options.areas[a].coords[n]-2,this.options.areas[a].coords[n+1]-2,4,4),this.__ctx.fillRect(this.options.areas[a].coords[n]-2,this.options.areas[a].coords[n+1]-2,4,4)},__fixActiveAreaIndex:function(){"undefined"==typeof this.options.areas[this.__activeArea]&&("undefined"!=typeof this.options.areas[this.__activeArea-1]?this.setActiveAreaIndex(this.__activeArea-1):this.setActiveAreaIndex(this.__activeArea))},removeAll:function(){this.options.areas=[],this.__fixActiveAreaIndex(),this.__redraw()},getMode:function(){return this.options.mode},getColor:function(){return this.__color},setColor:function(a){this.__color=a},isCSMode:function(){return"continiousSelect"===this.getMode()},getAreas:function(){return this.options.areas},setAreas:function(a){this.options.areas=a,this.setActiveAreaIndex(0),this.__redraw()},getArea:function(a){return this.options.areas[a]},setArea:function(a,b){this.options.areas[a]=b,this.__redraw()},removeArea:function(a){this.options.areas.splice(a,1),this.__fixActiveAreaIndex(),this.__redraw()},resetArea:function(a){this.setArea(a,{href:"",coords:[]}),this.options.onUpdateArea(this.options.areas[a]),this.__redraw()},getActiveArea:function(){return this.options.areas[this.__activeArea]},setActiveArea:function(a){this.setArea(this.__activeArea,a)},resetActiveArea:function(){this.resetArea(this.__activeArea)},removeActiveArea:function(){this.removeArea(this.__activeArea)},getActiveAreaIndex:function(){return this.__activeArea},setActiveAreaIndex:function(a){0>a||(this.__activeArea=a,"undefined"==typeof this.options.areas[a]&&this.resetArea(a),this.__redraw())},setImageUrl:function(b,c){var d=this,e=function(){"function"==typeof c&&c()};this.options.imageUrl=b;var f=function(){d.options.image?a(d.__$canvas).css({position:"absolute",width:"100%",height:"100%",top:0,left:0}):a(d.__$canvas).css({background:"url("+d.__image.src+")"}),d.__redraw(),e()},g=function(){var a=d.__image;return null!=a.complete&&1==a.complete?void f():void setTimeout(g,500)};a(this.__image).load(f),g(),this.__image.src!==b&&(this.__image.src=b)},getImageUrl:function(){return this.options.imageUrl},_CSMode:{context:null,init:function(b){this.context=b,this.__mouseMoves=[],this.__$drawCanvas=this.context._initCanvas(),a(this.context.element).css({position:"relative"}),a(this.context.element).append(this.__$drawCanvas),a(this.context.__$canvas).on("mousemove",this.__mousemove.bind(this)),a(this.__$drawCanvas).on("mousemove",this.__mousemove.bind(this)),a(this.__$drawCanvas).on("mouseup",this.__mouseup.bind(this)),a(this.__$drawCanvas).on("mousedown",this.__mousedown.bind(this)),a(this.__$drawCanvas).on("mouseleave",this.__stopDrag.bind(this)),this.__drawCanvasCtx=this.__$drawCanvas[0].getContext("2d")},_addClick:function(b,c){var d=a(b.target).offset();this.__mouseMoves.push({x:b.pageX-d.left,y:b.pageY-d.top,isDragging:c})},__mousedown:function(a){var b=this.context.getAreas();this.context.setActiveAreaIndex(b.length),a.preventDefault(),this._isDrawing=!0,this._showDrawArea(),this.__mouseMoves=[],this._addClick(a)},__click:function(){for(var a=this.__mouseMoves[0],b=this.context.getAreas().reverse(),c=null,d=function(a,b){for(var c={left:!1,right:!1,top:!1,bottom:!1},d=0;d<b.length;d+=2)b[d]<a.x?c.left=!0:c.right=!0,b[d+1]<a.y?c.top=!0:c.bottom=!0;return c.left&&c.right&&c.top&&c.bottom},e=0;e<b.length;e++)if(d(a,b[e].coords)){c=e;break}"number"==typeof c&&this.context.setActiveAreaIndex(c),this.context.__onAreaSelect()},_prepareCoords:function(a){var b=this.context.options.approximationStep||0,c=function(a){for(var c=[a[0]],d=function(a,c){return Math.abs(a-c)>b},e=null,f=1;f<a.length;f++)e=c[c.length-1],f<a.length-1&&d(a[f].x,e.x)&&d(a[f].y,e.y)&&c.push(a[f]);return c},d=function(a){var b=[];return a.forEach(function(a){b.push.call(b,a.x,a.y)}),b};return d(c(a))},__mouseup:function(a){return a.preventDefault(),"none"===this.__$drawCanvas.css("display")?!1:(this.__stopDrag(),this._showDrawArea(!1),this._clearCtx(),1===this.__mouseMoves.length?this.__click():this.__mouseMoves.length<3?!1:void this.context.setActiveArea({coords:this._prepareCoords(this.__mouseMoves)}))},__mousemove:function(a){return this._isDrawing?(this._addClick(a,!0),void this._redraw()):!1},_clearCtx:function(){this.context._clearCtx(this.__drawCanvasCtx)},_redraw:function(){var a=this.__drawCanvasCtx;this._clearCtx(),a.strokeStyle="#df4b26",a.lineJoin="round",a.lineWidth=5;for(var b=0;b<this.__mouseMoves.length;b++)a.beginPath(),this.__mouseMoves[b].isDragging&&b?a.moveTo(this.__mouseMoves[b-1].x,this.__mouseMoves[b-1].y):a.moveTo(this.__mouseMoves[b].x-1,this.__mouseMoves[b].y),a.lineTo(this.__mouseMoves[b].x,this.__mouseMoves[b].y),a.stroke(),a.closePath()},onCanvasSizeUpdate:function(){var a=this.context.__$canvas,b=a.width(),c=a.height();this.__$drawCanvas.attr("height",c).attr("width",b),this.__$drawCanvas.css({display:"none",position:"absolute",left:0,top:0,width:b+"px",height:c+"px"}),this.__$drawCanvas.width=b,this.__$drawCanvas.height=c},__stopDrag:function(){this._isDrawing=!1},_showDrawArea:function(a){a!==!1?this.__$drawCanvas.css({display:"inline-block"}):this.__$drawCanvas.hide()}}});var b=function(a,b,c,d,e,f,g){function h(a,b,c,d){return Math.sqrt((a-=c)*a+(b-=d)*b)}if(!g||(g=function(a,b,c,d,e,f){if(!(e-c))return{x:c,y:b};if(!(f-d))return{x:a,y:d};var g,h=-1/((f-d)/(e-c));return{x:g=(e*(a*h-b+d)+c*(a*-h+b-f))/(h*(e-c)+d-f),y:h*g-h*a+b}}(a,b,c,d,e,f),g.x>=Math.min(c,e)&&g.x<=Math.max(c,e)&&g.y>=Math.min(d,f)&&g.y<=Math.max(d,f))){var i=d-f,j=e-c,k=c*f-d*e;return Math.abs(i*a+j*b+k)/Math.sqrt(i*i+j*j)}var l=h(a,b,c,d),m=h(a,b,e,f);return l>m?m:l},c=function(a){f(a)},d=function(a){a||(a=document),a.addEventListener("touchstart",c,!0),a.addEventListener("touchmove",c,!0),a.addEventListener("touchend",c,!0)},f=function(a,b){a.preventDefault();var c=a.changedTouches[0]||a,d=document.createEvent("MouseEvent");d.initMouseEvent({touchstart:"mousedown",touchmove:"mousemove",touchend:"mouseup"}[a.type],!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),d.originalType=a.type,(b||c.target).dispatchEvent(d)}}(jQuery);