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

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

我們將構(gòu)建一個圖表，在其中將以分層方式排列節(jié)點(diǎn)，以可視化公司中的責(zé)任鏈。我們?yōu)楣?jié)點(diǎn)使用JavaScript圖表庫，TreeLayout和自定義AnchorPattern定義。這是最終結(jié)果：

<script src =“ MindFusion.Common.js” type =“ text / javascript”> </ script>
<script src =“ MindFusion.Diagramming.js” type =“ text / javascript”> </ script>
<script src =“ ChainOfResponsibility.js” type =“ text / javascript”> </ script>

<div style="position: absolute; top: 0px; bottom: 0px; right: 0px; width: 200px;
height: 200px; border-bottom: 1px solid #e2e4e7; background-color: #c0c0c0;">
                <canvas id="overview" width="200" height="200">
                </canvas>
            </div>        

二.圖和圖節(jié)點(diǎn)

我們使用表示圖畫布的HTML元素創(chuàng)建圖：

// create a Diagram component that wraps the "diagram" canvas
diagram = Diagram.create(document.getElementById("diagram"));
diagram.setVirtualScroll(true);

元素，但根據(jù)滾動條的位置顯示圖的內(nèi)容。這樣甚至可以將大圖繪制到小屏幕上，例如移動設(shè)備。

每個節(jié)點(diǎn)將保留文本，并將根據(jù)其在樹中的位置以特殊顏色呈現(xiàn)。這是包含節(jié)點(diǎn)的文本和顏色的兩個列表：

//list with brushes for the nodes
var brushes = ["#0099cc",  "#33cccc", "#00e6ac", "#00e6ac", "#99cc00", "#99cc00", "#ff9900",  "#ff9900", "#ff5c33"];
//list with company positions
var positions = ["CEO", "Vice Presidents", "Regional Directors", "Head of Departments", "Senior Managers", "Team Leaders", "Senior Specialists", "Specialists", "General Workers"];

var f = diagram.getFactory();
for (var i = 0; i < 9; i++)
{
var node = f.createShapeNode(0, 0, 25, 15);
node.setText(positions[i]);
node.setBrush({ type: 'SolidBrush', color: brushes[i] });
node.setStroke('#7F7F7F');
}

三.圖表鏈接

我們在要通過createDiagramLink方法連接的節(jié)點(diǎn)之間創(chuàng)建DiagramLink實(shí)例。該方法返回新創(chuàng)建的鏈接的實(shí)例。

var link = f.createDiagramLink（n [0]，n [1]）;

//we make the links look pretty
function styleLink(link)
{
link.setStroke("#7F7F7F");
link.setStrokeThickness(1.0);
link.setHeadShape("Triangle");
link.setHeadShapeSize(3.0);
link.setHeadBrush({ type: 'SolidBrush', color: '#7F7F7F' });
}

styleLink（link）;

然后，我們使用AnchorPattern類在錨定到節(jié)點(diǎn)上創(chuàng)建兩個模式。錨點(diǎn)是節(jié)點(diǎn)上用于傳入或傳出鏈接的對接點(diǎn)–取決于創(chuàng)建它們的方式。該AnchorPattern從建AnchorPoint實(shí)例。每個AnchorPoint代表一個停靠點(diǎn)，構(gòu)造函數(shù)中的其他兩個布爾參數(shù)指定是否應(yīng)將模式應(yīng)用于傳入和傳出節(jié)點(diǎn)。AnchorPoint -s定義相對于矩形的對接點(diǎn)，其頂部，左側(cè)，底部，右側(cè)的尺寸為（0、0、100、100）。這意味著左邊框中間的點(diǎn)是（0，50），而下邊框中間的點(diǎn)是（50，100）。

這是我們將使用的兩個AnchorPattern -s的代碼：

var ap1 = new AnchorPattern([
new AnchorPoint(50, 0, true, true),
new AnchorPoint(100, 50, true, true),
new AnchorPoint(50, 100, true, true),
new AnchorPoint(0, 50, true, true)
]);

var ap2 = new AnchorPattern([
new AnchorPoint(50, 0, true, true),
new AnchorPoint(50, 100, true, true),
new AnchorPoint(0, 50, true, true)
]);

for (var i = 0; i < 9; i++)
{
if (n[i].getOutgoingLinks().length > 1)
n[i].setAnchorPattern(ap2);
else
n[i].setAnchorPattern(ap1);
}

創(chuàng)建節(jié)點(diǎn)后，我們將使用TreeLayout對其進(jìn)行精美布置。最初，我們創(chuàng)建所有具有相同坐標(biāo)的節(jié)點(diǎn)，因此通過算法使它們彼此遠(yuǎn)離：

var layout = new MindFusion.Graphs.TreeLayout(); layout = new MindFusion.Graphs.TreeLayout();
layout.direction = 1; //LayoutDirection.LeftToRight.direction = 1; //LayoutDirection.LeftToRight
layout.nodeDistance = 30;.nodeDistance = 30;
layout.anchoring = Anchoring.Reassign;.anchoring = Anchoring.Reassign;
diagram.arrange(layout);.arrange(layout);

至此，本教程結(jié)束。