MindFusion.Diagramming for WinForms使用教程：如何创建责任链图
MindFusion.Diagramming for WinForms是一个能帮助你创建工作流和进程图表的.NET控件；数据库实体关系图表；组织图表；对象层次和关系图表；图表和树。它是基于对象－图表框，表格和箭头类型，将其归类分派给其他并结合成复杂的结构。该控件提供超过预先定义的50多种图表框，如自定义设计样式和对图表框着色等。MindFusion.Diagramming for WinForms现已加入在线订购，Standard Single Developer版本原价2848现在年终钜惠抢购立享优惠只需2345，立即查看详情>>
【慧都网】下载MindFusion.Diagramming for WinForms最新试用版
我们将构建一个图表，在其中将以分层方式排列节点，以可视化公司中的责任链。我们为节点使用JavaScript图表库，TreeLayout和自定义AnchorPattern定义。这是最终结果：
I.常规设置
我们使用网页来托管该图，并创建一个empy JavaScript代码隐藏文件。该网页需要引用代表流程图库的* .js文件：
<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>
然后我们需要一个Canvas来绘制图表。重要的是我们给Canvas一个id。这样，我们可以从代码隐藏文件中引用它：
<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>
现在我们准备开始对应用程序进行编码。
二.图和图节点
我们使用表示图画布的HTML元素创建图：
// create a Diagram component that wraps the "diagram" canvas
diagram = Diagram.create(document.getElementById("diagram"));
diagram.setVirtualScroll(true);
该setVirtualScroll方法使帆布停留大如含有其
元素，但根据滚动条的位置显示图的内容。这样甚至可以将大图绘制到小屏幕上，例如移动设备。
每个节点将保留文本，并将根据其在树中的位置以特殊颜色呈现。这是包含节点的文本和颜色的两个列表：
//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"];
我们使用Factory类的实例，该类是具有静态方法的帮助程序类，用于创建DiagramNode和DiagramLink实例。
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');
}
每个节点的笔划为浅灰色。笔刷和文本取自我们先前声明的相应数组。请注意，在使用Factory类创建图项目时，它们会自动添加到图的项目集合中。如果手动创建它们，则必须自己添加它们。
三.图表链接
我们在要通过createDiagramLink方法连接的节点之间创建DiagramLink实例。该方法返回新创建的链接的实例。
var link = f.createDiagramLink（n [0]，n [1]）;
我们使用它通过一种特殊的方法来样式化链接：styleLink。
//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）;
该方法使用–setStroke和setHeadBrush方法来指定链接的灰度笔触和画笔。它还为链接设置大小为3的三角形头部。
然后，我们使用AnchorPattern类在锚定到节点上创建两个模式。锚点是节点上用于传入或传出链接的对接点–取决于创建它们的方式。该AnchorPattern从建AnchorPoint实例。每个AnchorPoint代表一个停靠点，构造函数中的其他两个布尔参数指定是否应将模式应用于传入和传出节点。AnchorPoint -s定义相对于矩形的对接点，其顶部，左侧，底部，右侧的尺寸为（0、0、100、100）。这意味着左边框中间的点是（0，50），而下边框中间的点是（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) ]);
我们使用setAnchorPattern方法将我们定义的两个模式之一应用于节点。这取决于传出链接的数量：
for (var i = 0; i < 9; i++)
{
if (n[i].getOutgoingLinks().length > 1)
n[i].setAnchorPattern(ap2);
else
n[i].setAnchorPattern(ap1);
}
IV.图表布局
创建节点后，我们将使用TreeLayout对其进行精美布置。最初，我们创建所有具有相同坐标的节点，因此通过算法使它们彼此远离：
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);
所有布局算法均与在图实例上调用的ranging方法一起应用。它以所需的算法为参数。如果仅应用算法，则结果如下所示：
为了查看箭头的排列方式，我们可以调用routeAllLinks方法。调用后，链接看起来好多了。
至此，本教程结束。
