永利最大(官方)网站

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

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

我们将构建一个包含50个随机节点的图，并以编程方式缩放和平移该图。这是最终图的屏幕截图：

一.项目设置

我们添加了对MindFusion.Diagramming.js和MindFusion.Common.js文件的引用。我们还添加了对另一个名为MouseEvents.js的文件的引用。这是我们的代码隐藏文件。

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

在网页的正文中，我们创建一个Canvas元素，并为其分配一个ID。这很重要，因为我们将在代码中引用Canvas

<div style="width: 100%; height: 100%; overflow: auto;"> style="width: 100%; height: 100%; overflow: auto;">
    <canvas id="diagram_canvas" width="2100" height="2100"><canvas id="diagram_canvas" width="2100" height="2100">
        This page requires a browser that supports HTML 5 Canvas element.
    </canvas></canvas>
</div></div>

在我们称为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");
    }}

节点之间的连接器是使用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");
})})

我们创建了具有相同边界的图表项目，这意味着它们彼此重叠。排列它们的最佳方法是使用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
});});

通过处理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);

这样我们的样品就准备好了。

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