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 阅读(3805) 评论(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


只有注册用户登录后才能发表评论。


网站导航: