如何在工具栏中添加边[mxGraph - js]

时间:2018-01-13 01:25:33

标签: javascript mxgraph

我试图在mxGraph的工具栏中添加边缘。跟随示例的顶点我可以完美地完成它。但边缘我不能这样做,有人可以帮助我吗?我声明了一种链接样式,但它不起作用。

            var addVertex = function(icon, w, h, style)
            {
                var vertex = new mxCell(null, new mxGeometry(0, 0, w, h), style);
                vertex.setVertex(true);

                var img = addToolbarItem(graph, toolbar, vertex, icon);
                img.enabled = true;

                graph.getSelectionModel().addListener(mxEvent.CHANGE, function()
                {
                    var tmp = graph.isSelectionEmpty();
                    mxUtils.setOpacity(img, (tmp) ? 100 : 20);
                    img.enabled = tmp;
                });
            };


            addVertex('images/rectangle.gif', 100, 40, '');
            addVertex('images/rounded.gif', 100, 40, 'shape=link');
            addVertex('images/ellipse.gif', 40, 40, 'shape=ellipse');
            addVertex('images/rhombus.gif', 40, 40, 'shape=rhombus');
            addVertex('images/triangle.gif', 40, 40, 'shape=triangle');
            addVertex('images/cylinder.gif', 40, 40, 'shape=cylinder');
            addVertex('images/actor.gif', 30, 55, 'shape=umlActor');

3 个答案:

答案 0 :(得分:0)

我认为您可以编辑要向其添加边缘的工具栏的XML文件,就像向工具栏添加新单元格一样

答案 1 :(得分:0)

尽管Edge是一个单元格对象,但是不能将其放置在工具栏中进行拖放。如果您打算在顶点之间建立连接,则可以在代码中使用以下内容并进行检查:

mxConnectionHandler.prototype.connectImage = new mxImage('images/connector.gif', 16, 16);

在鼠标悬停于任何顶点(源顶点)上时,将出现一个连接图标(带有向右箭头)。只需单击该图标并将其拖动到另一个顶点(目标顶点)即可。这将在两个实体之间创建边缘

答案 2 :(得分:0)

var addVertex = function(mylabel, icon, w, h, style)
            {
                var vertex = new mxCell(mylabel, new mxGeometry(0, 0, w, h), style);
                vertex.setVertex(true);
            
                addToolbarItem(graph, toolbar, vertex, icon);
            };
            
            addVertex("None",'<c:url value="/resources/js/examples/editors/images/swimlane.gif"/>', 120, 160, 'shape=swimlane;startSize=20;');
            addVertex("Catagory 1",'<c:url value="/resources/js/examples/editors/images/rectangle.gif"/>', 100, 40, 'shape=rectangle');
            addVertex("Catagory 2",'<c:url value="/resources/js/examples/editors/images/rounded.gif"/>', 100, 40, 'shape=rounded');
            addVertex("Catagory 3",'<c:url value="/resources/js/examples/editors/images/ellipse.gif"/>', 40, 40, 'shape=ellipse');
            addVertex("Catagory 4",'<c:url value="/resources/js/examples/editors/images/rhombus.gif"/>', 40, 40, 'shape=rhombus');
            addVertex("Catagory 5",'<c:url value="/resources/js/examples/editors/images/triangle.gif"/>', 40, 40, 'shape=triangle');
            addVertex("Catagory 6",'<c:url value="/resources/js/examples/editors/images/cylinder.gif"/>', 40, 40, 'shape=cylinder');
            addVertex("Catagory 7",'<c:url value="/resources/js/examples/editors/images/actor.gif"/>', 30, 40, 'shape=actor');

// toolbar.addLine();