动态画线 :
插件: https://github.com/camoconnell/lazy-line-painter
我是用的raphael.js 插件来做一些事情的,并且lazy-line-painter本身也是要依赖于raphael的
lazy-line-painter的部分原理:比如在一张图片上有2点A 和 B,lazy-line-painter首先会画出A和B点之间的线Line_AB_1但是把这条线设为透明的,在视觉上根本看不到这条线,之后呢根据你所设的时间(即你设想总共画出这条线的时间)把这条线分为若干份,之后不断的画出一小份一小份的线,最后组成一条新的路径线路并把之前的那个线Line_AB_1删掉,接下来看代码
var draw = Raphael('map_navigation_container', 964, 893); var lineStr = "M498,467L512,452,L512,444L548,445L547,496L525,497L498,467"; var polyline = draw.path(lineStr).attr({ "stroke": "none","stroke-width": 0,"fill-opacity": 0}); print({ 'canvas': draw, 'pathstr': polyline, 'duration': 5000, 'attr': { "fill-opacity": 0, "stroke": "#000", "stroke-dasharray": null, "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-opacity": 1, "stroke-width": 3 }, 'callback': function () { } }, this); var print = function( settings, octx ) { var canvas = settings.canvas, duration = settings.duration, attr = settings.attr; var guide_path = settings.pathstr; var path = canvas.path( guide_path.getSubpath( 0, 1 ) ).attr( attr ), total_length = guide_path.getTotalLength( guide_path ), start_time = new Date().getTime(), interval_length = 25; var interval_id = setInterval( function() { var elapsed_time = new Date().getTime() - start_time, this_length = elapsed_time / duration * total_length, subpathstr = guide_path.getSubpath( 0, this_length ); attr.path = subpathstr; path.animate( attr, interval_length ); if ( elapsed_time >= duration ) { clearInterval( interval_id ); if (settings.callback !== undefined) { settings.callback(); } guide_path.remove(); } }, interval_length ); }
534total visits,1visits today
Leave a Reply