学习twaver，API使用记录@慕课网原创_慕课网

twaver最基本的点

网元 Element：Node、Link

容器 Box

画布 Network

        // 容器
        var box = new twaver.ElementBox();

        // 画布
        var network = new twaver.vector.Network(box);

        var topo = document.getElementById("topo");
        topo.appendChild(network.getView());

        network.adjustBounds({x:0, y:0, width:1000, height:500});

        // 网元Node
        var node = new twaver.Node();
        node.setName("TWaver");
        box.add(node);

        // 网元Link
        var link1 = new twaver.Link(node1, node);
        link1.setName("Hello!");
        box.add(link1);

Network上获取鼠标事件

监听鼠标事件: mousedown、mousemove、mouseup、keydown等

network.getView().addEventListener(MouseEvent', function (e) {});

       /*为选中的网元，增加阴影效果*/
        var selectionModel = box.getSelectionModel();
        selectionModel.setSelectionMode("singleSelection");

        twaver.Styles.setStyle("shadow.yoffset", 0);
        twaver.Styles.setStyle("shadow.xoffset", 0);

        var mouseObj  = null;
        network.getView().addEventListener("mousemove", function (e) {
            var element = network.getElementAt(e);
            if (element instanceof twaver.Node) {
                mouseObj= element;
                selectionModel.setSelection(element);
            } else if (mouseLocation) {
                selectionModel.removeSelection(mouseObj);
            }
        });

Network缩放

物理缩放：network.setZoomManager(new twaver.vector.PhysicalZoomManager(network));

逻辑缩放：network.setZoomManager(new twaver.vector.LogicalZoomManager(network));

混合缩放：network.setZoomManager(new twaver.vector.MixedZoomManager(network));

<html>
  <head>
  </head>
  <body>
  <div id="topo" >
  玩一玩twaver
  </div>
    <script src="./twaver.js"></script>
    <script type="text/javascript">
    window.onload = function () {
        var topo = document.getElementById("topo");
        var box = new twaver.ElementBox();
        var network = new twaver.vector.Network(box);
        topo.appendChild(network.getView());

        network.adjustBounds({x:0, y:0, width:700, height:700});
        var x=300, y=300, r=200;
        var center = new twaver.Node();
        center.setLocation(x, y);
        box.add(center);

        var count=20;
        for(var i=0;i<count; i++){
            var node = new twaver.Node();
            var angle = i * 2 * Math.PI / count ;
            var radius = r*( i%2 * 0.5 + 0.5);
            node.setLocation(x+radius*Math.cos(angle), y+radius*Math.sin(angle));
            node.setLayerId('node');
            box.add(node);

            var link = new twaver.Link(center, node);
            link.setStyle('link.width', 1);
            link.setStyle('link.color', 'orange');
            link.setLayerId('link');
            box.add(link);
        }

        var linkLayer=new twaver.Layer('link');
        box.getLayerBox().add(linkLayer);
        box.getLayerBox().moveToTop(linkLayer);
        // 默认情况下，就是使用了物理缩放
        //network.setZoomManager(new twaver.vector.PhysicalZoomManager(network));
        //network.setZoomManager(new twaver.vector.LogicalZoomManager(network));
        network.setZoomManager(new twaver.vector.MixedZoomManager(network));        

        console.log(network.getGraphicsZoom(),network.getSizeZoom(),network.getLocationZoom());// 1,1,1

        // 以sizeZoom为标准，当值低于0.8的时候，label不显示，低于0.6时，label2不显示，低于0.5时，告警冒泡不显示，并且link不显示
        network.setZoomVisibilityThresholds({
            zoomName : 'sizeZoom',
            link : 0.5,
            label : 1.1,
            label2 : 0.6,
            alarmBalloon : 0.5,
        });
    }

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

twaver注册图片

        /**
         * name: 图片的注册名称。后续使用中就使用该name进行引用。例如"preview_icon"、"my_node_image"等；
         * source: 图片源。例如："images/loading.gif"；
         * width: 图片的注册宽度；
         * height: 图片的注册高度；
         */
        twaver.Util.registerImage : function (name, source, width, height)