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制圖的更多信息。