您的位置: 首页  >  文章  >  Mindfusion教程：带有剪切图像的自定义图表节点（上）

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

分类: 文章 • 2024-06-02 07:58:04

下载Mindfusion最新版本

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

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最新版本

相关推荐