MindFusion.Diagramming for WinForms是一個(gè)能幫助你創(chuàng)建工作流和進(jìn)程圖表的.NET控件；數(shù)據(jù)庫實(shí)體關(guān)系圖表；組織圖表；對(duì)象層次和關(guān)系圖表；圖表和樹。它是基于對(duì)象－圖表框，表格和箭頭類型，將其歸類分派給其他并結(jié)合成復(fù)雜的結(jié)構(gòu)。該控件提供超過預(yù)先定義的50多種圖表框，如自定義設(shè)計(jì)樣式和對(duì)圖表框著色等。MindFusion.Diagramming for WinForms現(xiàn)已加入在線訂購，Standard Single Developer版本原價(jià)2848現(xiàn)在搶購立享優(yōu)惠只需2345，立即查看詳情>>

點(diǎn)擊下載MindFusion.Diagramming for WinForms最新試用版

我們將構(gòu)建一個(gè)包含50個(gè)隨機(jī)節(jié)點(diǎn)的圖，并以編程方式縮放和平移該圖。這是最終圖的屏幕截圖：

一.項(xiàng)目設(shè)置

我們添加了對(duì)MindFusion.Diagramming.js和MindFusion.Common.js文件的引用。我們還添加了對(duì)另一個(gè)名為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>

在網(wǎng)頁的正文中，我們創(chuàng)建一個(gè)Canvas元素，并為其分配一個(gè)ID。這很重要，因?yàn)槲覀儗⒃诖a中引用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方法創(chuàng)建Diagram類的實(shí)例。所述的setBounds方法確定圖表的繪圖區(qū)域的尺寸。如果此大小大于“畫布”的大小，該圖將自動(dòng)顯示滾動(dòng)條。請(qǐng)注意，只有當(dāng)圖的區(qū)域大于畫布時(shí)，我們才可以使用平移。

我們使用Diagram類的一些設(shè)置來自定義應(yīng)用程序：

diagram.setDefaultShape（“ Rectangle”）;。setDefaultShape （“ Rectangle” ）;
diagram.setRouteLinks（true）;。setRouteLinks （true ）;
diagram.setRoundedLinks（true）;。setRoundedLinks （true ）;
diagram.setShowGrid（false）;。setShowGrid （false ）;

三.圖表項(xiàng)目

我們使用Factory類的createShapeNode方法創(chuàng)建圖節(jié)點(diǎn)。該工廠類作為一個(gè)實(shí)例，可通過在getFactory（）方法： 對(duì)（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");
    }}

節(jié)點(diǎn)之間的連接器是使用Factory的createDiagramLink方法創(chuàng)建的。我們循環(huán)遍歷所有50個(gè)節(jié)點(diǎn)，并將每個(gè)節(jié)點(diǎn)與圖節(jié)點(diǎn)集合中隨機(jī)抽取的節(jié)點(diǎn)連接。該集合可通過Diagram類的節(jié)點(diǎn)屬性獲得：

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");
})})

我們創(chuàng)建了具有相同邊界的圖表項(xiàng)目，這意味著它們彼此重疊。排列它們的最佳方法是使用JsDiagram提供的一種自動(dòng)布局算法。它們是MindFusion.Graphs命名空間的成員–您可以檢查其余部分。在我們的示例中，我們選擇了LayeredLayout，它提供了很好的結(jié)果。我們將其方向設(shè)置為LayoutDirection。我們還設(shè)置了一些其他屬性來調(diào)節(jié)節(jié)點(diǎn)距離，層距離等：

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);

四.平移和縮放

我們將通過處理標(biāo)準(zhǔn)DOM事件來實(shí)現(xiàn)平移和縮放。第一個(gè)是“ 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事件來實(shí)現(xiàn)平移。

/* 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);

這樣我們的樣品就準(zhǔn)備好了。

關(guān)于JavaScript繪圖：此本地JavaScript庫為開發(fā)人員提供了創(chuàng)建和自定義任何類型的圖，決策樹，流程圖，類層次結(jié)構(gòu)，圖，家譜樹，BPMN圖等的能力。該控件提供了豐富的事件集，眾多的自定義選項(xiàng)，動(dòng)畫，圖形操作，樣式和主題。您有100多個(gè)預(yù)定義節(jié)點(diǎn)，表節(jié)點(diǎn)和15多種自動(dòng)布局算法。通過//mindfusion.eu/javascript-diagram.html了解有關(guān)JavaScript制圖的更多信息。