markline.min.js

!function(t,e){function n(t,e,n,i){return Math.atan2(i-e,n-t)}function i(t,e,n,i,o,a,s){var h=o/2,r=a/2;t.save(),t.translate(e,n),t.rotate(i),t.translate(-h,-r),t.beginPath(),t.moveTo(0,0),t.lineTo(h,r),t.lineTo(0,a),t.strokeStyle=s,t.stroke(),t.restore()}function o(t,e,n,i){var o,a,s,h;return a=(t+n)/2,s=(e+i)/2,h=.2*Math.sqrt(Math.pow(i-e,2)+Math.pow(n-t,2)),o=Math.atan2(i-e,n-t),{x:a-h*Math.sin(o),y:s+h*Math.cos(o)}}function a(){if(f.save(),f.ctxGlobalAlpha=1,""!=L){var t=document.getElementById(L);f.drawImage(t,I.x,I.y,d,x)}else f.drawImage(Y,I.x,I.y,d,x);f.restore()}function s(t){for(var e=0;t>e;e++)m[e].paint(2.5)}function h(){f.save(),f.setTransform(1,0,0,1,0,0),f.clearRect(0,0,canvas.width,canvas.height),f.restore()}function r(){if(f.globalCompositeOperation="source-over",1==b?f.globalAlpha=1:f.globalAlpha=.2,A>=100?A=0:A+=.3,a(),1!=b){0!=k.hover&&"line"==k.type&&p[k.id].hoverPaint();for(var e=0;e<p.length;e++)p[e].paint(),g[e].paint(A)}else for(var e=0;e<p.length;e++)p[e].paint();0!=k.hover&&"point"==k.type?(m[k.id].hoverPaint(),s(v)):s(v),t.requestAnimationFrame(r)}function l(t,e){for(var n=null,i=0;i<p.length;i++)p[i].isMouseInLine(t)&&(k.type="line",n=p[i].id,p[i].onHover(e));for(var i=0;i<m.length;i++)m[i].isMouseInPoint(t)&&(k.type="point",m[i].onHover(e),n=i);null!=n?(k.hover=!0,k.id=n,y.style.cursor="pointer"):(T.style.display="none",k.hover=!1,k.id=null,k.type="",y.style.cursor=B||"default")}function c(e){e.addEventListener("mousemove",function(t){var n={x:t.clientX-e.getBoundingClientRect().left,y:t.clientY-e.getBoundingClientRect().top};l(n,t)},!1),e.addEventListener("mousedown",function(t){function n(t,e,n){return{x:t.x-e,y:t.y-n}}for(var i={x:t.clientX-e.getBoundingClientRect().left,y:t.clientY-e.getBoundingClientRect().top},o=n(i,I.x,I.y),s=[],r=[],l=0;l<p.length;l++){var c=n(i,p[l].x1,p[l].y1),u=n(i,p[l].x2,p[l].y2),f={x1:c.x,y1:c.y,x2:u.x,y2:u.y};s.push(f)}for(var l=0;l<m.length;l++){var d=n(i,m[l].x,m[l].y),x={x:d.x,y:d.y};r.push(x)}B="move",y.style.cursor=B,b=!0,e.addEventListener("mousemove",function(t){var n={x:t.clientX-e.getBoundingClientRect().left,y:t.clientY-e.getBoundingClientRect().top};if(1==b){I.x=n.x-o.x,I.y=n.y-o.y;for(var i=0;i<p.length;i++){var l={x1:n.x-s[i].x1,y1:n.y-s[i].y1,x2:n.x-s[i].x2,y2:n.y-s[i].y2};p[i].change(l)}for(var i=0;i<m.length;i++){var l={x:n.x-r[i].x,y:n.y-r[i].y};m[i].change(l)}h(),a();for(var i=0;i<p.length;i++)p[i].paint();for(var i=0;i<m.length;i++)m[i].paint(2.5)}},!1),e.addEventListener("mouseup",function(t){B="default",y.style.cursor=B,b=!1},!1),t.preventDefault()},!1),e.addEventListener("mousewheel",function(e){e=e||t.event;var n=e.wheelDelta;n>0?9>=E&&u(1.25):E>=-9&&u(.8)},!1)}function u(e,n){e>1?E+=1:E-=1,n=n||t.event;for(var i={x:n.clientX-canvas.getBoundingClientRect().left,y:n.clientY-canvas.getBoundingClientRect().top},o={x:i.x-I.x,y:i.y-I.y},s={x:(1-e)*o.x,y:(1-e)*o.y},r=I.x+s.x,l=I.y+s.y,c=0;c<p.length;c++){var u={x1:e*(p[c].x1-I.x)+r,y1:e*(p[c].y1-I.y)+l,x2:e*(p[c].x2-I.x)+r,y2:e*(p[c].y2-I.y)+l};p[c].change(u)}for(var c=0;c<m.length;c++){var y={x:e*(m[c].x-I.x)+r,y:e*(m[c].y-I.y)+l};m[c].change(y)}I.x=r,I.y=l,d=e*d,x=e*x,h(),a()}var y,f,d,x,v,g=[],p=[],m=[],w=0,P=0,C=0,A=0,L="",b="false",B="default",k={hover:!1,type:"",id:null},E=0,I={x:0,y:0},M=document.createElement("div");M.id="mk-info",M.style.display="none",document.body.appendChild(M);var T=document.getElementById("mk-info"),R=document.createElement("canvas"),X=R.getContext("2d");R.width=100,R.height=100,X.beginPath(),X.arc(50,50,15,0,2*Math.PI),X.fillStyle="rgba(255,255,255,1)",X.fill();var Y=document.createElement("canvas"),F=Y.getContext("2d");Y.width=100,Y.height=100,F.beginPath(),F.fillStyle="#000",F.fillRect(0,0,100,100),F.fill(),Date.now||(Date.now=function(){return(new Date).getTime()}),function(){"use strict";for(var e=["webkit","moz"],n=0;n<e.length&&!t.requestnFrame;++n){var i=e[n];t.requestAnimationFrame=t[i+"RequestAnimationFrame"],t.cancelAnimationFrame=t[i+"CancelAnimationFrame"]||t[i+"CancelRequestAnimationFrame"]}if(/iP(ad|hone|od).*OS 6/.test(t.navigator.userAgent)||!t.requestAnimationFrame||!t.cancelAnimationFrame){var o=0;t.requestAnimationFrame=function(t){var e=Date.now(),n=Math.max(o+16,e);return setTimeout(function(){t(o=n)},n-e)},t.cancelAnimationFrame=clearTimeout}}();var S=function(t,e,n){this.id=t,this.canvas=n,this.ctx=n.getContext("2d"),this.x1=e.from.x,this.y1=e.from.y,this.x2=e.to.x,this.y2=e.to.y,this.style=e.style||"#fff",this.info=e.info||"",this.init(),p[w]=this,w++,this.createBall()};S.prototype={init:function(){var t=o(this.x1,this.y1,this.x2,this.y2);this.cx=t.x,this.cy=t.y,this.angle=n(this.cx,this.cy,this.x2,this.y2),this.path=document.createElementNS("http://www.w3.org/2000/svg","path"),this.path.setAttribute("d","M"+this.x1+" "+this.y1+" Q"+this.cx+" "+this.cy+" "+this.x2+" "+this.y2),this.len=this.path.getTotalLength()},paint:function(){var t=this.ctx;t.save(),t.beginPath(),t.globalAlpha=1,t.shadowOffsetX=0,t.shadowOffsetY=0,t.shadowBlur=10,t.shadowColor="rgba(255,255,255,0.3)",this.draw(1),t.strokeStyle=this.style,t.stroke(),i(t,this.x2,this.y2,this.angle,20,10,this.style),t.closePath(),t.restore()},onHover:function(e){T.innerHTML="";for(var n=0;n<this.info.length;n++){var i=document.createElement("div"),o=document.createTextNode(this.info[n]);i.appendChild(o),T.appendChild(i)}var a=e.clientX,s=e.clientY;e.clientX+200>t.innerWidth?a=e.clientX-150:e.clientY+200>t.innerHeight&&(s=e.clientY-200),T.style.top=s+"px",T.style.left=a+20+"px",T.style.display="block"},draw:function(t){var e=this.ctx;e.moveTo(this.x1,this.y1),e.quadraticCurveTo(this.cx,this.cy,this.x2,this.y2),e.lineWidth=t,e.lineCap="round"},isMouseInLine:function(t){return this.ctx.beginPath(),this.draw(10),this.ctx.isPointInStroke(t.x,t.y)},pointAt:function(t){return this.px=this.path.getPointAtLength(this.len*t).x,this.py=this.path.getPointAtLength(this.len*t).y,this.path.getPointAtLength(this.len*t)},change:function(t){this.x1=t.x1,this.y1=t.y1,this.x2=t.x2,this.y2=t.y2,this.init(),this.changeBall()},hoverPaint:function(){var t=this.ctx;t.beginPath(),t.globalAlpha=.3,this.draw(6),t.strokeStyle=this.style,t.stroke(),i(t,this.x2,this.y2,this.angle,20,10,this.style)},createBall:function(){var t={ctx:this.ctx,x1:this.x1,y1:this.y1,path:this.path,len:this.len,style:this.style};new q(this.id,t)},changeBall:function(){g[this.id].change(this.x1,this.y1,this.path,this.len)}};var q=function(t,e){this.ctx=e.ctx,this.x=e.x1,this.y=e.y1,this.path=e.path,this.len=e.len,this.style=e.style||"#fff",g[t]=this,P++};q.prototype={paint:function(t){var t=t/100,e=this.ctx,n=15;e.save(),this.x=this.pointAt(t).x,this.y=this.pointAt(t).y,e.globalAlpha=.5,e.drawImage(R,this.x-n/2,this.y-n/2,n,n),e.restore()},change:function(t,e,n,i){this.x=t,this.y=e,this.path=n,this.len=i},pointAt:function(t){return this.path.getPointAtLength(this.len*t)}};var H=function(t){this.x=t.x,this.y=t.y,this.info=t.info||"",this.style=t.style||"#fff",this.ctx=f,0==t.id?this.id=0:this.id=t.id||C,m[C]=this,C++};H.prototype={paint:function(t){var e=this.ctx;e.globalAlpha=1,e.save(),e.beginPath(),e.shadowOffsetX=0,e.shadowOffsetY=0,e.shadowBlur=15,e.shadowColor="rgba(255,255,255,0.3)",this.draw(t),e.fillStyle=this.style,e.strokeStyle=this.style,e.lineWidth=.5,e.fill(),e.stroke(),e.closePath(),e.restore()},onHover:function(e){T.innerHTML="";var n=document.createElement("div"),i=document.createTextNode(this.info);n.appendChild(i),T.appendChild(n);var o=e.clientX,a=e.clientY;e.clientX+200>t.innerWidth?o=e.clientX-150:e.clientY+200>t.innerHeight&&(a=e.clientY-200),T.style.top=a+"px",T.style.left=o+20+"px",T.style.display="block"},draw:function(t){var e=this.ctx;e.arc(this.x,this.y,t,0,2*Math.PI)},isMouseInPoint:function(t){return this.ctx.beginPath(),this.draw(5),this.ctx.isPointInPath(t.x,t.y)},change:function(t){this.x=t.x,this.y=t.y},hoverPaint:function(){this.paint(5)}};var O=function(t,e,n,i){var o=document.getElementById(t);return y=document.getElementById(t),L=e||"",null!=o?(markLine.prototype.id=t,f=o.getContext("2d"),markLine.prototype.ctx=o.getContext("2d"),d=n||o.width,x=i||o.height,new markLine.prototype.init(t)):void console.error("The canvas id is undefined.Check it.")};O.prototype={init:function(t){this.canvas=document.getElementById(t),c(this.canvas)},updateLine:function(t){if(p.length=0,g.length=0,w=0,P=0,0!=t.length)for(var e=0;e<t.length;e++)new S(e,t[e],this.canvas)},paint:function(){r()},paintPoint:function(t){if(m.length=0,C=0,v=0,0!=t.length){for(var e=0;e<t.length;e++)new H(t[e]);v=t.length}},onContextmenu:function(t){this.canvas.addEventListener("contextmenu",t,!1)},onClick:function(e){var n=this.canvas;n.addEventListener("mousedown",function(i){var i=i||t.event;return 1!=i.which?void n.removeEventListener("mouseup",e,!1):void n.addEventListener("mouseup",e,!1)},!1)},setOption:function(t){this.updateLine(t)},getLines:function(){return p},getLine:function(t){return p[t]},getBalls:function(){return g},getBall:function(t){return g[t]},getPoint:function(t){return m[t]},getPoints:function(){return m},getTransInfo:function(){return{x:I.x,y:I.y,scale:E}},getHover:function(){return k}},O.prototype.init.prototype=O.prototype,t.markLine=O}(window);