SVG矢量图开发实例教程之元素（vsCell）

在上面的图形中，上面的蓝色框代表 vsStyleSheet 中的样式哈希表. 字符串

'defaultDian' 是键，值是一组样式列表（上图的红色框）。 请注意， 多比图

像框架为节点和连线定义了不同的样式，即 defaultDian 和 defaultBian。  在

“helloworld”的例子中，我们在调用 insertDian 和 insertBian 中并没有传

入任何参数，那么系统就会使用默认样式来构造节点和连线。

设置某个元素的样式

如果你只是想设置某一个元素的样式，而不是设置所有默认元素的样式，你 需要在 vsCell 构造时传入一个样式。例如在(vsGraph.insertDian 和 insertBian 函数中传入) 或使用 model.setStyle()函数直接设置

下面是一个例子

1.在 vsStyleSheet 中，有一个名为 'ROUNDED'的样式名，它定义了很 多默认的样式。下面的代码会插入一个节点， 节点的样式（如前景 色，背景色等）和'ROUNDED'中定义的一样。

 

var  v1 =  graph.insertDian(parent,  null,  'Hello',  20,  20,  80,

30,  'ROUNDED');

 

2.下面的代码会插入一个节点，节点的样式和'ROUNDED'中定义的一 样，但是边框色和填充色不一样。

 

var  v1 =   graph.insertDian(parent,  null,  'Hello',      20,  20,  80,

30,  'ROUNDED;strokeColor=red;fillColor=green');

 

3.不使用默认样式，只定义边框色和填充色。

 

var  v1 =  graph.insertDian(parent,  null,  'Hello',  20,  20,  80,

30,  ';strokeColor=red;fillColor=green');

 

4.使用默认样式 defaultDian，只定义填充色。

 

var  v1 =  graph.insertDian(parent,  null,  'Hello',  20,  20,  80,

30,  'defaultDian;fillColor=blue');

 

 

另外, vsGraph 类也提供了函数来存取样式。

 

核心函数: 

vsGraph.setCellStyle(style, cells) – 同时设置一个或多个元素的样 式。.

vsGraph.getCellStyle(cell) –获取某一个元素的样式数组. 

定义一个新的全局样式名 

 

以下的代码会重新定义一个名为 ROUNDED 全局样式。注意:

graph.getStylesheet().putCellStyle 可以用来注册全局样式

var  style  =  new   Object();

style[vsConstants.STYLE_SHAPE]  =  vsConstants.SHAPE_RECTANGLE;

style[vsConstants.STYLE_OPACITY]  =  50;

style[vsConstants.STYLE_FONTCOLOR]=  '#774400';

graph.getStylesheet().putCellStyle('ROUNDED',style);

�ca;�G�OGfont-family:"Microsoft JhengHei"; color:black'> 

 

 

另外, vsGraph 类也提供了函数来存取样式。

 

核心函数:

 

vsGraph.setCellStyle(style, cells) – 同时设置一个或多个元素的样 式。.

vsGraph.getCellStyle(cell) –获取某一个元素的样式数组.

 

定义一个新的全局样式名

 

 

以下的代码会重新定义一个名为 ROUNDED 全局样式。注意:

graph.getStylesheet().putCellStyle 可以用来注册全局样式

形状

 

 

在我们 helloworld 例子中， 调用函数 insertDian 时需要传入坐标，x 和 y 。 x 是相对左边的距离，y 是相对上边的距离。而这个边，即是 vsGraph 容器 的左边和上边。

 

另外一个我们不得不说的概念就是控制点。控制点是专门来描述连线必须经 过的路径。一条连线可以有一个或多个控制点来控制连线走的具体路径。

面介绍另外两个重要概念，相对位置和偏移量。 相对位置

 

 

如果元素存在于另外一个元素中（具有父元素）或者是在一个组中，那么他 的 x 和 y 就是相对他的父元素或组，否则就是相对于 vsGraph（你可以认为 根节点就是他的父元素）。

在默认的非相对定位情况下，连线的标注文字的 x 和 y 坐标都是相对图形左 上角的距离。

我们再来看节点的相对模式。 (x,y)值是父节点宽度和高度 (width, height)的 比值。 请看以下示意图。

 

(0,0)是在父节点的左上角。 (1,1)是在父节点的右下角。 (0.5,0.5)是在父节点的中间。

(-0.5,0.5)是在父节点的向左偏移 0.5 倍父节点宽度。

大小改变

 

 

改变大小的函数有：

 

最核心的函数:

 

vsGraph.resizeCell(cell, bounds) –改变指定元素的大小. vsGraph.resizeCells(cells, bounds) –同时改变多个指定元素的大 小。.

 

自定义数据对象

 

 

自定义数据对象是顶点或连线表示的后台数据。它并不是图形和形状相关的 数据，而是元素对应的后台业务数据。 例如，一个节点，代表部门经理，而 部门经理的身高，年龄等业务逻辑数据就可存储在自定义数据对象中。自定 义数据对象可以是字符串，也可以是更复杂的 javascript 对象。

web工作流的案例

 

以上的工作流应用为例，当用户选择某一个节点时，会弹出以下的对话框用 来编辑节点属性，除了 top/left/width/height 等图形相关的属性外，我们还添 加了描述，超链接等。

 

元素的类型

 

我们说过， vsCell 既可以表示节点，又可以表示连线。vsGraphModel. isDian()和 vsGraphModel.isBian()函数来判断元素是否是节点，或是否是连 线。