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" canvasdiagram = Diagram.create(document.getElementById("diagram"));diagram.setVirtualScroll(true);
该setVirtualScroll方法使帆布停留大如含有其
元素，但根据滚动条的位置显示图的内容。这样甚至可以将大图绘制到小屏幕上，例如移动设备。
每个节点将保留文本，并将根据其在树中的位置以特殊颜色呈现。这是包含节点的文本和颜色的两个列表：
//list with brushes for the nodesvar brushes = ["#0099cc", "#33cccc", "#00e6ac", "#00e6ac", "#99cc00", "#99cc00", "#ff9900", "#ff9900", "#ff5c33"];//list with company positionsvar 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 prettyfunction 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);elsen[i].setAnchorPattern(ap1);}
IV.图表布局
创建节点后，我们将使用TreeLayout对其进行精美布置。最初，我们创建所有具有相同坐标的节点，因此通过算法使它们彼此远离：
var layout = new MindFusion.Graphs.TreeLayout(); layout = new MindFusion.Graphs.TreeLayout();layout.direction = 1; //LayoutDirection.LeftToRight.direction = 1; //LayoutDirection.LeftToRightlayout.nodeDistance = 30;.nodeDistance = 30;layout.anchoring = Anchoring.Reassign;.anchoring = Anchoring.Reassign;diagram.arrange(layout);.arrange(layout);
所有布局算法均与在图实例上调用的ranging方法一起应用。它以所需的算法为参数。如果仅应用算法，则结果如下所示：
为了查看箭头的排列方式，我们可以调用routeAllLinks方法。调用后，链接看起来好多了。
至此，本教程结束。
想要购买该产品正版授权请点击【商城购买】，想了解更多产品信息请点击【咨询在线客服】
标签：
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！
