Mindfusion教程：带有剪切图像的自定义图表节点（上）

下载Mindfusion最新版本

一、References和HTML设置

我们要做的第一件事是为示例创建一个 页，并添加对必要的JavaScript文件的引用。在页面的部分中，我们提供了对以下jQuery文件的引用：

<a href="http://common/jquery.min.js">http://common/jquery.min.js</a><a href="http://common/jquery-ui.min.js">http://common/jquery-ui.min.js</a>

在HTML页面的末尾，就在结束标记之前，我们放置了对Diagramming库使用的两个JavaScript文件的引用：

<a href="http://MindFusion.Common.js">http://MindFusion.Common.js</a><a href="http://MindFusion.Diagramming.js">http://MindFusion.Diagramming.js</a>

我们的示例将其JS代码放在一个名为Script.js的单独文件中。我们也提到了它的引用：

<a href="http://Script.js">http://Script.js</a>

图库需要HTML Canvas来绘制自己。我们在 页中间添加一个：

<div style="width: 100%; height: 100%; overflow: auto;"><canvas id="diagram" width="2100" height="2100">This page requires a browser that supports HTML 5 Canvas element.</canvas></div>

二、OrgChartNode

在Script.js文件中，我们首先将映射添加到我们将从图库中使用的一些枚举和类中：

var Diagram = MindFusion.Diagramming.Diagram;var CompositeNode = MindFusion.Diagramming.CompositeNode;var Behavior = MindFusion.Diagramming.Behavior;var Alignment = MindFusion.Drawing.Alignment;var Rect = MindFusion.Drawing.Rect;

现在我们调用CompositeNode 的classFromTemplate方法，该方法使用我们将提供的JSON模板生成节点类：

var OrgChartNode = CompositeNode.classFromTemplate("OrgChartNode",{component: "GridPanel",rowDefinitions: ["*"],columnDefinitions: ["22", "*"],...............

在此代码中，我们指出CompositeNode将使用的面板是GridPanel。然后我们声明两个列表，用于设置 格行和列的宽度和高度。每个数组中的成员数表示 格有多少行/列。在我们的例子中，我们有一行占据所有位置和两列：一列是固定的22像素，另一列占用剩余的可用空间。

CompositeNode的JSON定义继续使用包含子项的数组：

children:[{component: "Rect",name: "Background",pen: "black",brush: "white",columnSpan: 2},{component: "Image",name: "Image",autoProperty: true,location: "ceo.png",margin: "1",imageAlign: "Fit"},

第一个子节点使用我们称之为“背景” 的Rect组件。它使用白色笔刷进行渲染，具有黑色轮廓并跨越两列，例如，它填充所有可用空间或每个节点。

第二个子类是一个对象。请注意行：

autoProperty: true

这意味着我们希望能够将此组件作为属性进行访问。在这种情况下，库使用组件的名称生成自动set / get方法。在我们的示例中，它们将是setImage / getImage。

第三个子节点是StackPanel组件。这是节点旁边的文本标签的容器。这个孩子有自己的子节点集合：

component: "StackPanel",orientation: "Vertical",gridColumn: 1,margin: "1",verticalAlignment: "Near",children:[{component: "Text",name: "Title",autoProperty: true,text: "title",font: "Arial bold"},{component: "Text",name: "FullName",autoProperty: true,text: "full name",pen: "blue",padding: "1,0,1,0"},{component: "Text",name: "Details",autoProperty: true,text: "details",font: "Arial 3"}

这个新StackPanel的子代是文本组件，称为Title，FullName和Details。他们将autoProperty设置为true，这意味着我们可以通过自动setter和getter方法访问它们的值。

下载Mindfusin最新版本

购买Mindfusion正版授权，请点击“咨询在线客服”哟！