TWaver - 專注UI技術

          http://twaver.servasoft.com/
          posts - 171, comments - 191, trackbacks - 0, articles - 2
            BlogJava :: 首頁 :: 新隨筆 :: 聯系 :: 聚合  :: 管理

          HTML5 實現Link跳線效果

          Posted on 2015-01-15 13:54 TWaver 閱讀(3817) 評論(0)  編輯  收藏

          之前我們推出過Flex版本的Link跳線效果,現在基于HTML5新版本的跳線效果也實現了,細微之處我們進行了改進,如link傾斜的時候Offset方向始終保持垂直等。先看效果。
          crossLink
          crosslink
          實現的算法和Flex基本一致,在這不做進一步分析了,算法中使用到矩陣的運算,所以在這貼一下矩陣運算的封裝。

          1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          11
          12
          13
          14
          15
          16
          17
          18
          19
          20
          21
          22
          23
          24
          25
          26
          27
          28
          29
          30
          31
          32
          33
          34
          35
          36
          37
          38
          39
          40
          41
          42
          43
          44
          45
          46
          47
          48
          49
          50
          51
          52
          53
          54
          55
          56
          57
          58
          59
          60
          var matrix=function(options){
              if (!(this instanceof arguments.callee)) {
                  return new arguments.callee(options);
              }
              this.init(options);
          };
           
          matrix.prototype={
              init:function(options){
                  this.matrix=options.matrix;
              },
           
              add:function(mtx){
                  var omtx=this.matrix;
                  var newMtx=[];
                  if(!mtx.length||!mtx[0].length||mtx.length!=omtx.length||mtx[0].length!=omtx[0].length){
                      return;
                  }
                  for(var i=0,len1=omtx.length;i<len1;i++){
                      var rowMtx=omtx[i];
                      newMtx.push([]);
                      for(var j=0,len2=rowMtx.length;j<len2;j++){
                          newMtx[i][j]=rowMtx[j]+mtx[i][j];
                      }
                  }
                  this.matrix=newMtx;
                  return this;
              },
           
              multiply:function(mtx){
                          var omtx = mtx.matrix;
                          var mtx = this.matrix;
                          var newMtx=[];
                          if(!isNaN(mtx)){
                              for(var i=0,len1=omtx.length;i<len1;i++){
                                  var rowMtx=omtx[i];
                                  newMtx.push([]);
                                  for(var j=0,len2=rowMtx.length;j<len2;j++){
                                      omtx[i][j]*=mtx;    
                                  }
                              }
                              return new matrix({matrix:newMtx});
                          }
                          var sum=0;
                          for(var i=0,len1=omtx.length;i<len1;i++){
                              var rowMtx=omtx[i];    
                              newMtx.push([]);
                              for(var m=0,len3=mtx[0].length;m<len3;m++){
                                  for(var j=0,len2=rowMtx.length;j<len2;j++){
                                      sum+=omtx[i][j]*mtx[j][m];    
                                  }
                                  newMtx[newMtx.length-1].push(sum);
                                  sum=0;
                              }
                          }
                          this.matrix=newMtx;
                          return this;        
                      }            
                  };
                  this.Matrix=matrix;

          只封裝了加和乘法,其他的運算方法也可以將矩陣表達式轉化過來就可以了,如平移、旋轉等。如需源碼,可郵箱申請。jeff.fu@servasoft.com


          只有注冊用戶登錄后才能發表評論。


          網站導航:
           
          主站蜘蛛池模板: 隆尧县| 邢台县| 滨州市| 循化| 嘉荫县| 陇南市| 蓬安县| 磴口县| 崇义县| 嘉鱼县| 十堰市| 天门市| 贡嘎县| 麟游县| 岑巩县| 凯里市| 保康县| 蒙阴县| 寿光市| 阳城县| 嘉峪关市| 比如县| 宜州市| 奉贤区| 石泉县| 安吉县| 同仁县| 泰和县| 师宗县| 铁力市| 嘉义县| 信宜市| 读书| 霍山县| 临武县| 眉山市| 湟中县| 高台县| 香港| 江油市| 昭通市|