标签：
Raphaël 版本2.2.0，修改了Raphaël代码
添加447行： R._oid = 0;
修改了6525行：this.id = R._oid++;//guid();
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>移动测试</title> 6 <style> 7 body { 8 background: #333; 9 color: #fff; 10 font: 300 100.1% "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif; 11 } 12 #holder { 13 height: 480px; 14 left: 50%; 15 margin: -240px 0 0 -320px; 16 position: absolute; 17 top: 50%; 18 width: 640px; 19 } 20 </style> 21 <script language="JavaScript" src="../js/jquery-1.12.4.min.js"></script> 22 <script> 23 (function() { 24 var fabricUrl = ‘../js/raphael.js‘; 25 26 document.write(‘<script src="‘ + fabricUrl + ‘" charset="utf-8"><\/script>‘); 27 })(); 28 </script> 29 <script language="JavaScript" src="../js/raphael.group.js"></script> 30 31 <script src="../js/json2.js" type="text/javascript"></script> 32 <script src="20-ani.js" type="text/javascript"></script> 33 <script src="20-ExpandObj.js" type="text/javascript"></script> 34 35 <script> 36 var $TD_AniObj; 37 38 39 40 41 $(document).ready(function () { 42 43 var $TD_Paper = Raphael(50, 10, 1000, 1000); 44 45 46 var c = $TD_Paper.ellipse(300, 30, 12, 22) 47 c.attr({ fill: ‘green‘ }); 48 c.click(function() { 49 if ($temp_flowflag==1) { 50 $temp_flowflag=0; 51 $temp_fillflag=0; 52 $temp_flowflag1=0; 53 54 } 55 else 56 { 57 $temp_flowflag=1; 58 $temp_fillflag=1; 59 $temp_flowflag1=1; 60 } 61 62 }); 63 64 var flowPathObj=new Object(); 65 var flowPathObjlength=new Object(); 66 67 Raphael.fn.flow = function (p,mo,s) {//p:path路径，mo：move对象，s：move对象位置系数 68 var _flow_aniObj; 69 this.customAttributes.along = function (f,fid) { 70 //console.log(fid) 71 if (flowPathObj[fid]==null) { 72 flowPathObj[fid]=$TD_Paper.getById(fid); 73 } 74 if (flowPathObjlength[fid]==null) { 75 flowPathObjlength[fid]=flowPathObj[fid].getTotalLength();//moveobj路径长度 76 } 77 78 var point = flowPathObj[fid].getPointAtLength(f * flowPathObjlength[fid]);//返回给定路径上给定长度的点坐标 79 var tr="t" + [point.x, point.y] + "r" + point.alpha; 80 81 //console.log($TD_Paper.getById(fid)) 82 return { 83 transform: tr 84 }; 85 }; 86 87 var l=p.getTotalLength();//moveobj路径长度 88 p.flowID=p.raphaelid 89 mo.attr({along: [s,p.flowID]}); 90 var t=100000; 91 run(); 92 function run() { 93 _flow_aniObj=mo.animate({along: [1,p.flowID]}, t-s*t, function () { 94 if (s!=0) { 95 mo.attr({along: [0,p.flowID]}); 96 mo.animate({along: [s,p.flowID]}, s*t, function () { 97 mo.attr({along: [s,p.flowID]}); 98 setTimeout(run()); 99 }); 100 }else{ 101 mo.attr({along: [0,p.flowID]}); 102 setTimeout(run()); 103 } 104 }); 105 } 106 return _flow_aniObj; 107 }; 108 109 110 Raphael.el.pathFlowStart = function () { 111 var v=this.node; 112 if (!v.pathFlowFlag||v.pathFlowFlag==null) { 113 v.pathFlowFlag=true; 114 if (v.obj!=null) { 115 for (var i = 0, ii = v.obj.length; i < ii; i++) { 116 v.obj[i].resume(); 117 } 118 119 } 120 else 121 { 122 var mo = $TD_Paper.ellipse(0, 0, 7, 3).attr({stroke: "none", fill: "#fff"}); 123 var _flow_aniObj=$TD_Paper.flow(v,mo,0);//初始对象移动 124 v.obj=new Array(); 125 v.obj.push(_flow_aniObj); 126 127 var l=v.getTotalLength();//moveobj路径长度 128 var c=l/80; 129 for (var i = 0; i <= c; i++) { 130 if (i!=0) 131 { 132 var a=i/c; 133 var o=mo.clone(true).attr({ fill: "red"}); 134 var _flow_aniObj=$TD_Paper.flow(v,o,a); 135 v.obj.push(_flow_aniObj); 136 } 137 138 } 139 } 140 } 141 } 142 143 Raphael.el.pathFlowStop = function () { 144 var v=this.node; 145 if (v.pathFlowFlag||v.pathFlowFlag==null) { 146 v.pathFlowFlag=false; 147 if (v.obj!=null) { 148 for (var i = 0, ii = v.obj.length; i < ii; i++) { 149 v.obj[i].stop(); 150 } 151 } 152 } 153 } 154 155 $TD_Paper.customAttributes.pathFlow = function (o,v) { 156 157 158 if (v == 1) { 159 160 eval("this.pathFlowStart()"); 161 } 162 else { 163 eval("this.pathFlowStop()"); 164 } 165 }; 166 167 168 169 var startTime = new Date(); 170 171 $TD_AniObj=$TD_Paper.add(aniJSONStr); 172 198 }); 199 200 setInterval(‘doGetRealData()‘, 5000); 201 var $temp_flowflag=0; 202 var $temp_fillflag=0; 203 var $temp_flowflag1=0; 204 205 function doGetRealData() { 206 207 $.getScript(‘20-exp.js‘).done(function () { 208 209 $TD_AniObj.attr(expJSONStr) 210 211 }); 212 } 213 </script> 214 </head> 215 <body > 216 <div id="holder"></div> 217 </body> 218 </html>
标签：
原文地址：http://www.cnblogs.com/sp007/p/5647389.html
