xmind树状结构（带有剪切图像的自定义图表节点）

xmind树状结构（带有剪切图像的自定义图表节点）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模板生成节点类：在Script.js文件中，我们首先将映射添加到我们将从图库中使用的一些枚举和类中：<a href="http://MindFusion.Common.js">http://MindFusio

在本文中，我们将创建一个组织结构图，该图使用每个员工的自定义节点。该图将使用Diagramming for JavaScript库创建。对于节点，我们使用CompositeNode类，这使我们能够创建图表节点，其外观可以通过组件和布局容器的组合来定义。

一、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方法访问它们的值。

点击“了解更多”下载产品最新试用版

↓↓↓