MindFusion.Diagramming for WinForms是一个能帮助你创建工作流和进程图表的.NET控件;数据库实体关系图表;组织图表;对象层次和关系图表;图表和树。它是基于对象-图表框,表格和箭头类型,将其归类分派给其他并结合成复杂的结构。该控件提供超过预先定义的50多种图表框,如自定义设计样式和对图表框着色等。MindFusion.Diagramming for WinForms现已加入在线订购,Standard Single Developer版本原价2848现在抢购立享优惠只需2345,立即查看详情>>
点击下载MindFusion.Diagramming for WinForms最新试用版
我们将构建一个包含50个随机节点的图,并以编程方式缩放和平移该图。这是最终图的屏幕截图:
我们将针对JavaScript使用MindFusion图表库。
一.项目设置
我们添加了对MindFusion.Diagramming.js和MindFusion.Common.js文件的引用。我们还添加了对另一个名为MouseEvents.js的文件的引用。这是我们的代码隐藏文件。
在网页的正文中,我们创建一个Canvas元素,并为其分配一个ID。这很重要,因为我们将在代码中引用Canvas
二.图表设置
在我们称为MouseEvents.js的代码隐藏文件中,我们使用DOMContentLoaded事件初始化该图。
document.addEventListener(“DOMContentLoaded”, function ().addEventListener(“DOMContentLoaded”, function ()
{{
// create a Diagram component that wraps the “diagram_canvas” canvas// create a Diagram component that wraps the “diagram_canvas” canvas
diagram = MindFusion.AbstractionLayer.createControl(Diagram, null, null, null, document.getElementById(“diagram_canvas”));= MindFusion.AbstractionLayer.createControl(Diagram, null, null, null, document.getElementById(“diagram_canvas”));
diagram.setBounds(new Rect(5, 5, 2000, 1000));.setBounds(new Rect(5, 5, 2000, 1000));
我们使用AbstractionLayer类的createControl方法创建Diagram类的实例。所述的setBounds方法确定图表的绘图区域的尺寸。如果此大小大于“画布”的大小,该图将自动显示滚动条。请注意,只有当图的区域大于画布时,我们才可以使用平移。
我们使用Diagram类的一些设置来自定义应用程序:
diagram.setDefaultShape(“ Rectangle”);。setDefaultShape (“ Rectangle” );
diagram.setRouteLinks(true);。setRouteLinks (true );
diagram.setRoundedLinks(true);。setRoundedLinks (true );
diagram.setShowGrid(false);。setShowGrid (false );
链接将被路由和舍入,并且不会渲染网格。
三.图表项目
我们使用Factory类的createShapeNode方法创建图节点。该工厂类作为一个实例,可通过在getFactory()方法: 对(VAR I = 0;我<50; i ++在)
{{
var colorIndex = Math.floor(Math.random() * 3); var colorIndex = Math.floor(Math.random() * 3);
var shape = diagram.getFactory().createShapeNode(new Rect(136, 36, 20, 10));var shape = diagram.getFactory().createShapeNode(new Rect(136, 36, 20, 10));
shape.setBrush({ type: 'SolidBrush', color: colors[colorIndex] });.setBrush({ type: 'SolidBrush', color: colors[colorIndex] });
if(i % 3 == 0)if(i % 3 == 0)
shape.setShape('Ellipse');.setShape('Ellipse');
else else
shape.setShape('Rectangle');.setShape('Rectangle');
if( i % 7 == 0)if( i % 7 == 0)
{{
shape.setBounds(new Rect(136, 36, 16, 8)); .setBounds(new Rect(136, 36, 16, 8));
}}
shape.setText("Node " + (i + 1).toString());.setText("Node " + (i + 1).toString());
shape.setTextColor("white");.setTextColor("white");
}}
我们将第三个形状制作为Ellipse,然后根据随机原理从三个画笔中选择一个画笔,并在数组中对其进行初始化。每个第七个形状都稍小一些–由setBounds方法设置,该方法以Rect作为参数,该尺寸略小于创建形状节点时使用的Rect实例。
节点之间的连接器是使用Factory的createDiagramLink方法创建的。我们循环遍历所有50个节点,并将每个节点与图节点集合中随机抽取的节点连接。该集合可通过Diagram类的节点属性获得:
diagram.nodes.forEach(function(node).nodes.forEach(function(node)
{{
var nodeIndex = Math.floor(Math.random() * 50); var nodeIndex = Math.floor(Math.random() * 50);
var node2 = diagram.nodes[nodeIndex];var node2 = diagram.nodes[nodeIndex];
var link = diagram.getFactory().createDiagramLink(node, node2);var link = diagram.getFactory().createDiagramLink(node, node2);
link.setHeadShape("Circle");.setHeadShape("Circle");
})})
我们通过setHeadShape方法自定义链接的外观。我们选择“圆形”形状作为每个链接的头部。
我们创建了具有相同边界的图表项目,这意味着它们彼此重叠。排列它们的最佳方法是使用JsDiagram提供的一种自动布局算法。它们是MindFusion.Graphs命名空间的成员–您可以检查其余部分。在我们的示例中,我们选择了LayeredLayout,它提供了很好的结果。我们将其方向设置为LayoutDirection。我们还设置了一些其他属性来调节节点距离,层距离等:
var layout = new MindFusion.Graphs.LayeredLayout(); layout = new MindFusion.Graphs.LayeredLayout();
layout.direction = MindFusion.Graphs.LayoutDirection.LeftToRight;.direction = MindFusion.Graphs.LayoutDirection.LeftToRight;
layout.siftingRounds = 0;.siftingRounds = 0;
layout.nodeDistance = 8;.nodeDistance = 8;
layout.layerDistance = 8;.layerDistance = 8;
diagram.arrange(layout);.arrange(layout);
所有布局都适用通过的安排法图,是以布局的一个实例作为参数。
四.平移和缩放
我们将通过处理标准DOM事件来实现平移和缩放。第一个是“ wheel”事件,我们将其附加到图表canvas元素:
var dgrm = document.getElementById(‘diagram_canvas’); dgrm = document.getElementById(‘diagram_canvas’);
dgrm.addEventListener(‘wheel’, function(e).addEventListener(‘wheel’, function(e)
{{
var zoom = diagram.getZoomFactor();var zoom = diagram.getZoomFactor();
zoom -= e.deltaY / 10;-= e.deltaY / 10;
if (zoom > 10)if (zoom > 10)
diagram.setZoomFactor(zoom);.setZoomFactor(zoom);
e.preventDefault(); // do not scroll.preventDefault(); // do not scroll
});});
我们使用Diagram的getZoomFactor和setZoomFactor方法来操纵缩放比例。缩放步骤是基于事件args的deltaY值计算的。您可以通过除以较小或较大的数字来命令缩放量。重要的是,我们在事件参数上调用preventDefault(),以超过画布对wheel事件的默认响应。
通过处理Canvas的mousedown和mouseup DOM事件来实现平移。
/* events fired on the draggable target */
dgrm.addEventListener(‘mousedown’, function(e).addEventListener(‘mousedown’, function(e)
{{
if( e.ctrlKey)if( e.ctrlKey)
diagram.setBehavior(MindFusion.Diagramming.Behavior.Pan);.setBehavior(MindFusion.Diagramming.Behavior.Pan);
}, false);}, false);
dgrm.addEventListener(‘mouseup’, function(e).addEventListener(‘mouseup’, function(e)
{{
if( e.ctrlKey)if( e.ctrlKey)
diagram.setBehavior(MindFusion.Diagramming.Behavior.LinkShapes);.setBehavior(MindFusion.Diagramming.Behavior.LinkShapes);
}, false);}, false);
如果要平移图,我们只需使用setBehavior方法更改图的行为即可。这些选项是“ 行为”枚举的成员。当用户单击图并按下Ctrl键时,我们将图的行为更改为“ Pan”。当鼠标抬起但按下Ctrl键时,我们将行为放回LinkShapes。这是默认行为,用鼠标拖动可创建新形状,而在现有的DiagramShape -s 之间拖动则创建DiagramLink -s。
这样我们的样品就准备好了。
关于JavaScript绘图:此本地JavaScript库为开发人员提供了创建和自定义任何类型的图,决策树,流程图,类层次结构,图,家谱树,BPMN图等的能力。该控件提供了丰富的事件集,众多的自定义选项,动画,图形操作,样式和主题。您有100多个预定义节点,表节点和15多种自动布局算法。通过https://mindfusion.eu/javascript-diagram.html了解有关JavaScript制图的更多信息。