jquery.canvasAreaDraw.min.js

(function(d){d.fn.canvasAreaDraw=function(d){this.each(function(f,e){v.apply(e,[f,e,d])})};var v=function(t,f,e){var b,g,h,c,n,l,q,u,r,m,p=!1;t=d.extend({imageUrl:d(this).attr("data-image-url")},e);e=d(f).val().replace(/[^0-9\,]/ig,"");b=e.length?e.split(",").map(function(a){return parseInt(a,10)}):[];e=d('<button type="button" class="btn"><i class="icon-trash"></i>\u041e\u0447\u0438\u0441\u0442\u0438\u0442\u044c</button>');h=d("<canvas>");c=h[0].getContext("2d");n=new Image;r=function(){h.attr("height",
n.height).attr("width",n.width);l()};d(n).load(r);n.src=t.imageUrl;n.loaded&&r();h.css({background:"url("+n.src+")"});d(f).after("<br>",h,"<br>",e);q=function(a){a.offsetX||(a.offsetX=a.pageX-d(a.target).offset().left,a.offsetY=a.pageY-d(a.target).offset().top);b[g]=Math.round(a.offsetX);b[g+1]=Math.round(a.offsetY);l()};u=function(a){a.offsetX||(a.offsetX=a.pageX-d(a.target).offset().left,a.offsetY=a.pageY-d(a.target).offset().top);p||(p={x:Math.round(a.offsetX),y:Math.round(a.offsetY)});a={x:Math.round(a.offsetX),
y:Math.round(a.offsetY)};for(var c=0;c<b.length;c++)b[c]=a.x-p.x+b[c],b[++c]=a.y-p.y+b[c];p=a;l()};l=function(){c.canvas.width=c.canvas.width;m();if(!(2>b.length)){c.globalCompositeOperation="destination-over";c.fillStyle="rgb(255,255,255)";c.strokeStyle="rgb(255,20,20)";c.lineWidth=1;if(6<=b.length){var a=getCenter();c.fillRect(a.x-4,a.y-4,8,8)}c.beginPath();c.moveTo(b[0],b[1]);for(a=0;a<b.length;a+=2)c.fillRect(b[a]-2,b[a+1]-2,4,4),c.strokeRect(b[a]-2,b[a+1]-2,4,4),2<b.length&&1<a&&c.lineTo(b[a],
b[a+1]);c.closePath();c.fillStyle="rgba(255,0,0,0.3)";c.fill();c.stroke()}};m=function(){d(f).val(b.join(","))};getCenter=function(){for(var a=[],c=0;c<b.length;c++)a.push({x:b[c],y:b[++c]});var d=a[0],e=a[a.length-1];d.x==e.x&&d.y==e.y||a.push(d);var k=e=d=0,h=a.length,m,f,g,c=0;for(f=h-1;c<h;f=c++)m=a[c],f=a[f],g=m.x*f.y-f.x*m.y,d+=g,e+=(m.x+f.x)*g,k+=(m.y+f.y)*g;g=3*d;return{x:e/g,y:k/g}};d(f).on("change",function(){var a=d(f).val().replace(/[^0-9\,]/ig,"");b=a.length?a.split(",").map(function(a){return parseInt(a,
10)}):[];l()});d(document).find(e).click(function(){b=[];l()});d(document).find(h).on("mousedown",function(a){var e,f,h=b.length;if(3===a.which)return!1;a.preventDefault();a.offsetX||(a.offsetX=a.pageX-d(a.target).offset().left,a.offsetY=a.pageY-d(a.target).offset().top);e=a.offsetX;a=a.offsetY;if(6<=b.length){var k=getCenter();c.fillRect(k.x-4,k.y-4,8,8);f=Math.sqrt(Math.pow(e-k.x,2)+Math.pow(a-k.y,2));if(6>f)return p=!1,d(this).on("mousemove",u),!1}for(k=0;k<b.length;k+=2)if(f=Math.sqrt(Math.pow(e-
b[k],2)+Math.pow(a-b[k+1],2)),6>f)return g=k,d(this).on("mousemove",q),!1;for(k=0;k<b.length;k+=2)1<k&&(f=w(e,a,b[k],b[k+1],b[k-2],b[k-1],!0),6>f&&(h=k));b.splice(h,0,Math.round(e),Math.round(a));g=h;d(this).on("mousemove",q);l();m();return!1});d(document).find(h).on("contextmenu",function(a){a.preventDefault();a.offsetX||(a.offsetX=a.pageX-d(a.target).offset().left,a.offsetY=a.pageY-d(a.target).offset().top);var c=a.offsetX;a=a.offsetY;for(var e=0;e<b.length;e+=2)if(dis=Math.sqrt(Math.pow(c-b[e],
2)+Math.pow(a-b[e+1],2)),6>dis){b.splice(e,2);l();m();break}return!1});d(document).find(h).on("mouseup",function(){d(this).off("mousemove");m();g=null})};d(document).ready(function(){d(".canvas-area[data-image-url]").canvasAreaDraw()});var w=function(d,f,e,b,g,h,c){function n(b,c,d,e){return Math.sqrt((b-=d)*b+(c-=e)*c)}if(c&&!(c=function(b,c,d,e,f,a){if(!(f-d))return{x:d,y:c};if(!(a-e))return{x:b,y:e};var h,g=-1/((a-e)/(f-d));return{x:h=(f*(b*g-c+e)+d*(b*-g+c-a))/(g*(f-d)+e-a),y:g*h-g*b+c}}(d,f,
e,b,g,h),c.x>=Math.min(e,g)&&c.x<=Math.max(e,g)&&c.y>=Math.min(b,h)&&c.y<=Math.max(b,h)))return e=n(d,f,e,b),d=n(d,f,g,h),e>d?d:e;c=b-h;var l=g-e;return Math.abs(c*d+l*f+(e*h-b*g))/Math.sqrt(c*c+l*l)}})(jQuery);