1 line
2.9 KiB
JavaScript
1 line
2.9 KiB
JavaScript
!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):t.MoveLine=i()}(this,function(){"use strict";var t=function(t,i){Object.keys(t).forEach(function(e){i[e]=t[e]})},i=function(t){var i=window.devicePixelRatio||1;t.canvas.width=t.canvas.width*i,t.canvas.height=t.canvas.height*i,t.canvas.style.width=t.canvas.width/i+"px",t.canvas.style.height=t.canvas.height/i+"px",t.scale(i,i)},e="undefined"==typeof window?{}:window,n=e.requestAnimationFrame||e.mozRequestAnimationFrame||e.webkitRequestAnimationFrame||e.msRequestAnimationFrame||function(t){return e.setTimeout(t,1e3/60)},a=e.cancelAnimationFrame||e.mozCancelAnimationFrame||e.webkitCancelAnimationFrame||e.msCancelAnimationFrame||function(t){clearTimeout(t)},o=function(t,i){var e=this;e.map=t;var n={lineWidth:.5,lineStyle:"rgb(200, 40, 0)",animateLineWidth:1,animateLineStyle:"#ffff00"};e.init(i,n);var a=e.baseCtx=e.options.canvas.getContext("2d");e.animateCtx=e.options.animateCanvas.getContext("2d");a.lineWidth=n.lineWidth};function s(t){this.points=t.points||[],this.age=t.age||0,this.maxAge=t.maxAge||0}return o.prototype.init=function(i,e){t(i,e),this.options=e},o.prototype.render=function(){var t=this,i=t.baseCtx;i&&t.roadLines.forEach(function(e){e.drawPath(i,t.map,t.options)})},o.prototype.animate=function(){var t=this,i=t.animateCtx;if(i){i.fillStyle="rgba(0,0,0,0.8)";var e=i.globalCompositeOperation;i.globalCompositeOperation="destination-in",i.fillRect(0,0,t.map.width,t.map.height),i.globalCompositeOperation=e,t.roadLines.forEach(function(e){e.draw(i,t.map,t.options)})}},o.prototype.adjustSize=function(){var t=this.map.width,e=this.map.height;this.baseCtx.canvas.width=t,this.baseCtx.canvas.height=e,this.animateCtx.canvas.width=t,this.animateCtx.canvas.height=e,i(this.baseCtx),i(this.animateCtx)},o.prototype.start=function(){var t=this;t.stop(),t.adjustSize(),t.addLine(),t.render(),function i(){t.timer=setTimeout(function(){t.animationId=n(i),t.animate()},50)}()},o.prototype.stop=function(){var t=this;a(t.animationId),t.timer&&clearTimeout(t.timer)},o.prototype.addLine=function(){var t=this.roadLines=[];this.options.data.forEach(function(i,e){t.push(new s({points:i}))})},s.prototype.getPointList=function(t){var i=this.path=[],e=this.points;return e&&e.length>0&&(e.forEach(function(e){i.push({pixel:t.toScreen(e)})}),this.maxAge=i.length),i},s.prototype.drawPath=function(t,i,e){var n=this.path||this.getPointList(i);t.beginPath(),t.lineWidth=e.lineWidth,t.strokeStyle=e.lineStyle,t.moveTo(n[0].pixel.x,n[0].pixel.y);for(var a=0,o=n.length;a<o;a++)t.lineTo(n[a].pixel.x,n[a].pixel.y);t.stroke()},s.prototype.draw=function(t,i,e){var n=this.path||this.getPointList(i);t.beginPath(),t.lineWidth=e.animateLineWidth,t.strokeStyle=e.animateLineStyle,this.age>=this.maxAge-1&&(this.age=0),t.moveTo(n[this.age].pixel.x,n[this.age].pixel.y),t.lineTo(n[this.age+1].pixel.x,n[this.age+1].pixel.y),t.stroke(),this.age++},o}); |