文档章节

Mindfusion教程:带有剪切图像的自定义图表节点(上)

x
 xiaochuachua
发布于 03/26 14:18
字数 894
阅读 0
收藏 0

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

本文转载自:https://mindfusion.eu/blog/

x
粉丝 0
博文 225
码字总数 49214
作品 0
私信 提问
绘制流程图的ActiveX 控件FlowChartX

FlowChartX 控件是用来绘制流程图的ActiveX 控件,能够帮助你创建工作流程图、对象层次和关系图、网络拓扑图、实体关系图、IVR、工业自动化、genealogy trees 、算法流程图、组织结构图、XML...

kongjianxuan
2014/06/25
0
0
FlowChartX控件的具体功能介绍www.baobiaokong.com/xinwen/610

FlowChartX 控件是用来绘制流程图的ActiveX 控件,能够帮助你创建工作流程图、对象层次和关系图、网络拓扑图、实体关系图、IVR、工业自动化、genealogy trees 、算法流程图、组织结构图、XML...

yidongkaifa
2014/09/23
68
0
强大的流程图绘制控件WpfDiagram

WpfDiagram是一款功能强大的流程图绘制控件,可以绘制工作流程图、对象层次和关系图、网络拓扑图、实体关系图、IVR、工业自动化、genealogy trees 、算法流程图、组织结构图、XML文档、类图等...

baobiaokongjian
2014/06/25
6.1K
1
图表控件FlowChart.NET详细介绍及免费下载地址

FlowChart.NET是一款专业的.NET平台下的流程图及图表控件,它可以运行在任何C#, VB.NET或Delphi.NET语言编写的软件中。能够帮助你创建工作流程图、对象层次和关系图、网络拓扑图、实体关系图...

yidongkaifa
2014/10/30
1K
0
图表控件FlowChart.NET详细介绍及免费下载购买地址

FlowChart.NET是一款专业的.NET平台下的流程图及图表控件,它可以运行在任何C#, VB.NET或Delphi.NET语言编写的软件中。能够帮助你创建工作流程图、对象层次和关系图、网络拓扑图、实体关系图...

yidongkaifa
2014/09/28
100
0

没有更多内容

加载失败,请刷新页面

加载更多

Redis集群搭建

服务器资源 ip 账号 配置 操作系统 xxx.70 root/xxx 磁盘50G(/)+150G(/home)、内存16G、CPU 16core CentOS Linux release 7.2.1511 (Core) xxx.74 root/xxx 磁盘50G(/)+150G(/home)、......

jxlgzwh
29分钟前
4
0
avro

一、 ```我们已经接触过很多序列化框架(或者集成系统),比如protobuf、hessian、thrift等,它们各有优缺点以及各自的实用场景,Avro也是一个序列化框架,它的设计思想、编程模式都和thi...

hexiaoming123
31分钟前
5
0
QML TextInput的字体超出控件范围

本文链接:https://blog.csdn.net/chyuanrufeng/article/details/54691998 问题描述 :QML TextInput输入内容超过TextInput的大小 当输入过多的字符串时,会出现内容超过TextInput的大小,字...

shzwork
32分钟前
4
0
《Java 8 in Action》Chapter 10:用Optional取代null

1965年,英国一位名为Tony Hoare的计算机科学家在设计ALGOL W语言时提出了null引用的想法。ALGOL W是第一批在堆上分配记录的类型语言之一。Hoare选择null引用这种方式,“只是因为这种方法实...

HelloDeveloper
33分钟前
4
0
进击的 Java ,云原生时代的蜕变

作者| 易立 阿里云资深技术专家<br /> <br />导读:云原生时代的来临,与Java 开发者到底有什么联系?有人说,云原生压根不是为了 Java 存在的。然而,本文的作者却认为云原生时代,Java 依然...

阿里巴巴云原生
35分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部