FabricFamilyTree/qunee.html at master · githubyangwei/FabricFamilyTree · GitHub

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .Q-CanvasPanel .Q-Canvas:nth-child(2) {
            opacity: 0;
        }
    </style>
</head>
<body>
<div style="position: relative;width: 800px;">
    <div style="position: absolute; width: 800px;height:600px; top: 0px; bottom: 0px;border: 1px solid #ccc;" id="canvas"></div>

    <div id="overview" style="width: 150px;height: 120px;box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.2);position: absolute;right: 5px;top: 5px;background-color: #FFF;"></div>

</div>


<script type="application/javascript" src="resource/jquery.min.js"></script>
<script type="application/javascript" src="resource/commons/qunee.js"></script>
<script type="application/javascript" src="resource/commons/common.js"></script>
<script>
    var option={
        allCHD:[15,100],
        CHDTOPwidth:160,
        CHDTopHeight:48,
        CHDAllHeight:2000,
        data:[{
            id:156,
            name:'张三',
            dai:15,
            children:[{
                id:1521,
                name:'张三1儿子',
                dai:15,
                children:[{
                    id:152111,
                    name:'张三11儿子',
                    dai:16,
                },{
                    id:15232,
                    name:'张三22儿子',
                    dai:16,
                },{
                    id:15244,
                    name:'张三33儿子',
                    dai:16,
                },{
                    id:15265,
                    name:'张三44儿子',
                    dai:16,
                }]
            },{
                id:1522,
                name:'张三2儿子',
                dai:153,
            },{
                id:1524,
                name:'张三3儿子',
                dai:15,
            },{
                id:1525,
                name:'张三4儿子',
                dai:15,
            }]
        }]
    };


    var graph = new Q.Graph(canvas);
    var p = graph.toLogical(0, 0)
    graph.zoomOut(p.x, p.y)
    graph.zoomIn(p.x, p.y)
    graph.limitedBounds = {x: 0, y: 0, width: 100000, height: 100000}

    graph.originAtCenter = false;
    var hello = graph.createNode("Hello", 0, 0);
    hello.anchorPosition = Q.Position.LEFT_TOP;
    var qunee = graph.createNode("Qunee", 220, 0);
    qunee.anchorPosition = Q.Position.LEFT_TOP;

    graph.enableWheelZoom = false;

    graph.onmousewheel = function (evt) {
        var zoominDelta = evt.delta;
        if (zoominDelta > 0) {
            return this.zoomIn(0, 0);
        }
        return this.zoomOut(0, 0);
    }

/*
    graph.isMovable = function (item) {
        return item.name && item.name.indexOf('Q') === 0;
    }
*/


    function createShape( join,x, y,height){//画竖着的线
        var shape = graph.createShapeNode(join, x, y);
        shape.moveTo(0, 0);
        shape.lineTo(0, height);
        shape.setStyle(Q.Styles.SHAPE_STROKE, 1);
        shape.setStyle(Q.Styles.SHAPE_STROKE_STYLE, "#e6e6e6");
        shape.setStyle(Q.Styles.LAYOUT_BY_PATH, true);
        shape.setStyle(Q.Styles.SHAPE_FILL_COLOR, null);
        shape.setStyle(Q.Styles.LINE_CAP, Q.Consts.LINE_CAP_TYPE_BUTT);
        shape.setStyle(Q.Styles.SELECTION_COLOR, "none");
        shape.name="";
        return shape;
    }

    function creatLable(num,x,y,width,height) {//画多少多少代
        var text = graph.createText("第"+num+"代",x,y);
        text.setStyle(Q.Styles.LABEL_BACKGROUND_COLOR, (num%2==0?'#fafafa':"#f5f5f5"));
        text.setStyle(Q.Styles.LABEL_COLOR, "#6d6d6d");
        text.setStyle(Q.Styles.LABEL_PADDING, 0);
        text.setStyle(Q.Styles.LABEL_FONT_SIZE, 16);
        text.setStyle(Q.Styles.LABEL_RADIUS, 0);

        text.setStyle(Q.Styles.LABEL_SIZE, new Q.Size(width, height));
        text.setStyle(Q.Styles.SELECTION_COLOR, "none");
    }

    function creatLineTopBlock(option){//底层分格
        for(var i=option.allCHD[0];i<=option.allCHD[1];i++){
            creatLable(i,option.CHDTOPwidth/2+(i-option.allCHD[0])*option.CHDTOPwidth,option.CHDTopHeight/2,option.CHDTOPwidth,option.CHDTopHeight);
            createShape(Q.Consts.LINE_JOIN_TYPE_BEVEL,(i-option.allCHD[0]+1)*option.CHDTOPwidth, 0,option.CHDAllHeight);
        }
    }

    creatLineTopBlock(option);


    //设置右上角缩略图显示
    var overview = new Q.Overview(document.getElementById('overview'));
    overview.setGraph( window.graph);

</script>
</body>
</html>