MindFusion.Diagramming for WinForms使用教程:创建具有多个父节点的树

翻译|使用教程|编辑:杨鹏连|2020-09-22 10:15:31.757|阅读 166 次

概述:在此博客文章中,我们将说明如何创建具有多个父节点的树。在我们的示例中,我们将查看一棵树,其中并非所有分支的节点数量都比其前辈更高。

# 31款JAVA开发必备控件和工具 # 开发软/控件产品年终优惠

MindFusion.Diagramming for WinForms是一个能帮助你创建工作流和进程图表的.NET控件;数据库实体关系图表;组织图表;对象层次和关系图表;图表和树。它是基于对象-图表框,表格和箭头类型,将其归类分派给其他并结合成复杂的结构。该控件提供超过预先定义的50多种图表框,如自定义设计样式和对图表框着色等。MindFusion.Diagramming for WinForms现已加入在线订购,Standard Single Developer版本原价2848现在抢购立享优惠只需2345,立即查看详情>>

点击下载MindFusion.Diagramming for WinForms最新试用版

大多数树结构都是作为层次结构构建的:节点的数量在每个级别上都增加。在我们的示例中,我们将查看一棵树,其中并非所有分支的节点数量都比其前辈更高。在我们的树中,某些节点将具有多个父节点,例如,有些节点具有多个祖先。

您可以在线尝试示例:

为了构建该应用程序,我们使用MindFusion Diagramming for JavaScript库。

I.常规设置

在网页中,我们添加了初始化Canvas的代码。我们给画布一个id:
<div style="overflow: visible; height: 100%; margin: 1px; padding: 0px;">
    <canvas id="diagram" width="2100" height="2500">
        This page requires a browser that supports HTML 5 Canvas element.
    </canvas>
</div>
我们添加了对提供图表功能的两个JavaScipt文件的引用:MindFusion.Diagramming和MindFusion.Common。我们还添加了对代码隐藏文件的引用,该文件包含我们应用程序的JavaScript代码:

<script src="Scripts/MindFusion.Common.js" type="text/javascript"></script>
<script src="Scripts/MindFusion.Diagramming.js" type="text/javascript"></script>
<script src="MultipleParentNodes.js" type="text/javascript"></script>

我们已将这些文件放在名为Scripts的子文件夹中,该子文件夹位于我们的主应用程序文件夹中。

二.图表设置

我们在window.onload事件处理程序中创建该图。我们要确保所有脚本都已加载:

window.onload = function(e)
{
    var diagramEl = document.getElementById('diagram');
    // create a Diagram component that wraps the "diagram" canvas
    diagram = AbstractionLayer.createControl(Diagram, null, null, null, diagramEl);
    diagram.setAllowInplaceEdit(true);
    diagram.setRouteLinks(true);
    diagram.setShowGrid(true);
    diagram.setRoundedLinks(true);
    diagram.setBounds(new Rect(0, 0, 2000,2500));
}
我们使用对网页中Canvas的DOM元素的引用来创建图。我们将其allowInplaceEdit属性设置为true,这使用户可以交互式地编辑节点和链接。我们使用showGrid渲染背景网格,以帮助对齐节点和链接。我们使用setBounds方法设置setRoundedLinks并为图表做大工作。

二.创建图节点

我们在单独的方法中创建DiagramNode -s,在创建控件并完成所有设置后调用该方法:

function onLoaded()
{
    var nodes = {};

    for(var i = 0; i < 5; i++)
    {
        nodes[i] = diagram.getFactory().createShapeNode(new Rect(20, 20, 20, 12));
        nodes[i].setShape('Rectangle');
        nodes[i].setBrush({ type: 'SolidBrush', color: '#567939' });
    };
我们初始化一个列表,在其中我们将动态存储我们要引用的那些节点。首先,我们创建5个ShapeNode -s,它们是树的第一层。我们使用Factory的createShapeNode方法创建ShapeNode -s和DiagramLink -s。注意,我们将创建所有具有相等边界的节点。我们不必担心它们的位置,因为我们将在最后应用自动布局。

通过Diagram的getFactory方法可以使用Factory。通常,您不创建类,而是通过Diagram实例获取其实例。

我们使用setShape为我们希望节点采用的图表形状提供ID。可以在在线帮助中找到带有可用图表形状及其ID的列表。

我们还使用setBrush来指定ShapeNode的填充。在我们的例子中,我们使用SolidBrush,但是还有其他选项可供选择。

然后,我们将创建一个ShapeNode,它将成为下一个级别:

var node5 = diagram.getFactory().createShapeNode(new Rect(20, 20, 20, 12 ));
node5.setShape('Rectangle');
node5.setBrush({ type: 'SolidBrush', color: '#6f9c49' });
我们用比第一级节点略浅的绿色着色。然后,我们再次使用Factory类在第一级的5个节点和第二级的一个节点之间创建DiagramLink -s:
    for(var i = 0; i <5; i ++)
    { 
        var link = diagram.getFactory()。createDiagramLink(nodes [i],node5); 
        link.setHeadShape(“ Triangle”);
        link.setText(“ 20%”);
        link.setHeadShapeSize(3.0);
        link.setHeadBrush({type:'SolidBrush',color:'#7F7F7F'});
    };
DiagramLink类的setText和setHeadShape方法允许我们在最后指定链接的标签及其形状。还有setBaseShape,它允许我们在DiagramLink的开始处指定形状。

关于Factory类的妙处在于,它会自动将新创建的DiagramItem -s(例如节点和链接)添加到图的项目集合中。您还可以分别将新创建的DiagramNode -s和DiagramLink -s分别作为节点和链接集合的成员。

现在,我们具有从第一级到第二级的所有5个节点的5个链接:

多父节点
我们以相同的方式继续进行其余的图表。我们创建ShapeNode与-s 厂,然后绑定与节点厂。

三.布局

我们使用LayeredLayout布置图的所有节点。由于该图不是典型的树,因此我们首选LayeredLayout而不是TreeLayout

var lLayout = new MindFusion.Graphs.LayeredLayout();
diagram.arrange(lLayout);
在图上应用任何其他算法真的很容易-您只需要创建它的一个实例,然后调用图的range方法来应用该实例。您可以快速更改布局并进行实验,看看哪种布局效果最好。

在我们的例子中,LayeredLayout看起来不错,到此,我们就完成了树的构建。

关于JavaScript绘图:此本地JavaScript库为开发人员提供了创建和自定义任何类型的图,决策树,流程图,类层次结构,图,家谱树,BPMN图等的能力。该控件提供了丰富的事件集,众多的自定义选项,动画,图形操作,样式和主题。您有100多个预定义节点,表节点和15多种自动布局算法。通过https://mindfusion.eu/javascript-diagram.html了解有关JavaScript制图的更多信息。


想要购买该产品正版授权请点击【商城购买】,想了解更多产品信息请点击【咨询在线客服】


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至hey@evget.com

文章转载自:MindFusion

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
在线咨询
联系我们
TOP
在线客服系统
live chat