GView图形组件

GView是基于canvas实现的图形可视化组件, 可以通过Node节点、Link链路、Group分组和Subview子图等图形元素, 实现拓扑图、设备面板图、流程图、组织架构图等

坐标系

GView基于canvas实现，坐标系的原点(0,0)位于左上角

图元的x/y位置或points都要参考这个坐标系

图元

图元是GView基本呈现元素, 是Data的子类, 系统默认提供了以下几种图元

Node节点功能最丰富的图元, 根据不同的type类型, 可以呈现为:
Link链路由From节点和To节点决定的路径图元, 根据不同的type类型, 可以呈现为:
Group分组由子节点组成的分组图元, 其位置和范围由子节点决定, 有展开和关闭两种状态
Subview子图包含子节点的层次图元, 子图只显示当前子图下的网元, 可以切换查看不同的子图, 子图又分为
- 节点类型子图
- 链路类型子图

系统默认实现了上述图元的渲染方式, 所以只有以上图元及其子类对象可以显示在GView上

属性

GView的属性主要包括图元相关的全局属性, 和图元显示/可见/交互/可用等控制属性

图元全局属性

大部分图元显示/控制属性既可以在图元上设置, 也可以在GView上全局设置, 图元上的属性优先级大于GView上的全局属性

以下是图元的全局属性前缀

node_Node全局属性前缀, 包括关闭状态的Group和Subview
link_Link全局属性前缀, 包括LinkSubview
group_expand_Group展开状态全局属性前缀

显示属性

label_fieldstringLabel标签显示的图元属性, 默认为name

                    
                        gView.set("label_field", "label"); //Label标签显示图元的label属性

link_gapnumber多条相同类型链路的间距, 默认为16

                    
                        gView.set("link_gap", 20);

label_in_frontbooleanLabel标签是否显示在最前面, 默认为false

                    
                        gView.set("label_in_front", true);

适用于Geo地图等场景, 可以避免Label标签遮盖问题

info_in_frontinfo_in_frontInfo提示是否显示在最前面, 默认为false

                    
                        gView.set("info_in_front", true);

适用于拓扑告警提示, 异常信息显示在最上层, 不会被遮盖

线条样式

line_joinstring线条(线段/圆弧/曲线)交汇处的连接样式, 默认为miter
有如下可选项:
- miter以尖角的方式连接线条
- bevel以斜角的方式连接线条
- round以圆角的方式连接线条
line_capstring线条结束端点处的样式, 默认为butt
有如下可选项:
- butt线段末端以方形结束
- round线段末端以圆形结束
- square线段末端以方形结束, 但是增加了一个宽度和线段相同, 高度是线段厚度一半的矩形区域

网格线属性

网格线可辅助图元编辑操作

grid_line_visibleboolean网格线是否显示, 默认为false

                    
                        gView.set("grid_line_visible", true); //显示网格线

grid_line_spacenumber网格线间距, 默认为50

                    
                        gView.set("grid_line_space", 100);

grid_line_strokestring网格线画笔样式, 默认为#e6e6e6

                    
                        gView.set("grid_line_stroke", "LightSkyBlue");

grid_line_stroke_line_widthnumber网格线画笔线宽, 默认为0.6

                    
                        gView.set("grid_line_stroke_line_width", 1);

grid_line_axis_stroke_line_widthnumber网格线轴画笔线宽, 默认为1.2

                    
                        gView.set("grid_line_axis_stroke_line_width", 2);

控制/交互属性

hit_paddingnumber点击等交互时点的扩大交互范围, 默认为2
点击时系统获取到的只是一个点, 但是很难判断点下是否有图元, 尤其是对于链路来说, 很难被点击和选中, 通过hit_padding将点扩大成了矩形, 就比较容易选中图元
```
                    
                        gView.set("hit_padding", 3);
                    
                
```

select_modestring选择模式, 默认为multiple

有如下可选项:

multiple多选模式, 配合ctrl键, 可以通过点击或框选进行多选操作
single单选模式, 只能有一个图元被选中

                    
                        gView.set("select_mode", "single");

group_expand_on_dblclickboolean双击Group分组时, 是否展开或关闭, 默认为true

                    
                        gView.set("group_expand_on_dblclick", false);

subview_drill_on_dblclickboolean双击Subview子图时, 是否进入或退出(双击空白), 默认为true

                    
                        gView.set("subview_drill_on_dblclick", false);

selectableboolean控制所有图元是否可选中, 默认为true, 如果为false, 则所有图元不可选中

                    
                       gView.set("selectable", false);

hoverableboolean控制所有图元是否可悬停, 默认为false, 为提高效率, 只有GView的hoverable为true时, 图元才可以悬停

                    
                       gView.set("hoverable", true); //***

movableboolean控制节点是否可拖动, 默认为true, 如果为false, 则节点不可拖动

                    
                       gView.set("movable", false);

disabledboolean控制是否禁用所有图元, 默认为false, 如果为true, 则节点不可交互

                    
                       gView.set("disabled", true);

方法

本文档只列出了常用方法, 更多方法请参考API文档

缩放/平移

zoomFit(later)缩放&平移整个画布以显示全部图元
- laterboolean可选参数, 是否延后到下一个动画帧执行, 默认为false, 如果设置为true, 会在下一帧执行全图缩放呈现操作
```
                    
                       gView.zoomFit();
                       gView.zoomFit(true);
                    
                
```

zoomIn(center)放大显示GView的所有图元

centerboolean可选参数, 是否为中心缩放, 默认为true
- true以GView的中心作为参考点进行缩放
- false以GView的左上角作为参考点进行缩放

                    
                       gView.zoomIn(); //以GView的中心作为参考点进行缩放
                       gView.zoomIn(false); //以GView的左上角作为参考点进行缩放

zoomOut(center)缩小显示GView的所有图元

centerboolean可选参数, 是否为中心缩放, 默认为true
- true以GView的中心作为参考点进行缩放
- false以GView的左上角作为参考点进行缩放

                    
                       gView.zoomOut();         //以GView的中心作为参考点进行缩放
                       gView.zoomOut(false);    //以GView的左上角作为参考点进行缩放

zoomCenter(newZoom)以GView的中心作为参考点设置新的zoom缩放值

newZoomnumber新的zoom缩放值

                    
                       gView.zoomCenter(1);
                       gView.zoomCenter(0.6);

zoomByPoint(zoom, point)以指定的点作为参考点并设置新的zoom缩放值

鼠标滚轮wheel缩放使用的就是这个方法

zoomnumber新的zoom缩放值
pointobject指定的缩放参考点

                    
                       gView.zoomByPoint(2, {x: 100, y:100}); //以(100,100)作为参考点, 并将zoom缩放值设置为2

translate(x, y)将GView的原点坐标移动指定的距离

xnumber沿x轴(横向)移动距离
ynumber沿y轴(纵向)移动距离

                    
                        gView.translate(100, 100);
                        gView.translate({x: 200, y: 200});

translateCenter(later)平移画布坐标以将所有图元的中心位置移动到GView组件的中心
跟zoomFit的区别是, zoomFit是缩放&平移操作以显示所有图元, 而translateCenter只是平移操作
- laterboolean可选参数, 是否延后到下一个动画帧执行, 默认为false, 如果设置为true, 会在下一帧执行平移操作
```
                    
                        gView.translateCenter(100, 100);
                        gView.translateCenter(true);
                    
                
```

resetTransform()重置GView坐标的缩放和平移

                    
                        gView.resetTransform();

getOriginalPoint(evtOrTransformedPoint)返回指定事件对象或相对于GView左上角的原始坐标点(没有平移/缩放等转换)
一般用于交互操作, 例如)拖拽创建节点, 拖拽完成时, 要将鼠标事件转换成GView上的原始坐标, 这样节点才会出现在正确的位置
- evtOrTransformedPointevent ｜ object指定事件对象或相对于GView左上角的相对坐标点(界面显示)
- originalPoint>Object相对于GView左上角的原始坐标点(没有平移/缩放等转换)
```
                    
                        gView.getOriginalPoint({x: 100, y: 100});
                        gView.getOriginalPoint(mouseEvent);
                    
                
```

图元坐标切换

getDataWindowBounds(data, bodyOnly)返回指定图元相对于当前窗口Viewpoint的实际bounds范围
- dataData要获取bounds的指定图元
- bodyOnlyboolean返回图元bounds只包含图元body还是包括Label/Info等在内的整个bounds, 默认为true(只返回body), 如果为false, 会返回网元的整个bounds
- boundsobject图元相对于当前窗口Viewpoint的实际bounds范围
```
                    
                        gView.getDataWindowBounds(node)
                        gView.getDataWindowBounds(node,true)
                    
                
```
getDataPageBounds(data, bodyOnly)返回指定图元相对于整个页面文档的实际bounds范围
- dataData要获取bounds的指定图元
- bodyOnlyboolean返回图元bounds只包含图元body还是包括Label/Info等在内的整个bounds, 默认为true(只返回body), 如果为false, 会返回网元的整个bounds
- boundsobject图元相对于整个页面文档的实际bounds范围
```
                    
                        gView.getDataPageBounds(node)
                        gView.getDataPageBounds(node,true)
                    
                
```
getDataPageBounds和getDataWindowBounds主要区别是, getDataPageBounds返回的是相对于整个页面文档的bounds, 而getDataWindowBounds返回的是相对于当前窗口Viewpoint的bounds
getDataAt(evtOrTransformedPoint, bodyOnly)获取指定事件或坐标点(相对GView左上角)下最上层的图元
- evtOrTransformedPointEvent | object指定事件或坐标点(相对GView左上角)
- bodyOnlyboolean是否只检测图元的body区域, 默认为true(只检车body), 如果为false, 会检测网元的整个bounds
- dataData指定事件或坐标点(相对GView左上角)下最上层的图元, 如果没有检测到点, 返回null
```
                    
                        gView.getDataAt(mouseDownEvent)
                        gView.getDataAt({x: 100, y: 100}, false)
                    
                
```
getDataArrayAt(evtOrTransformedPoint, bodyOnly)获取指定事件或坐标点(相对GView左上角)下所有的图元列表
- evtOrTransformedPointEvent | object指定事件或坐标点(相对GView左上角)
- bodyOnlyboolean是否只检测图元的body区域, 默认为true(只检车body), 如果为false, 会检测网元的整个bounds
- dataArrayarray指定事件或坐标点(相对GView左上角)下所有的图元列表, 如果没有检测到点, 返回[]
```
                    
                        gView.getDataArrayAt(mouseDownEvent)
                        gView.getDataArrayAt({x: 100, y: 100}, false)
                    
                
```
getDataArrayAtRect(transformedRect, bodyOnly)获取指定矩形区域(相对GView左上角)下所有的图元列表
- transformedRectobject指定矩形区域(相对GView左上角)
- bodyOnlyboolean是否只检测图元的body区域, 默认为true(只检车body), 如果为false, 会检测网元的整个bounds
- dataArrayarray指定矩形区域(相对GView左上角)下所有的图元列表, 如果没有检测到点, 返回[]
```
                    
                        gView.getDataArrayAtRect({x: 100, y: 100, width:100, height:100}, false)
                    
                
```

子图切换

Subview子图以层级方式显示图元, 只有当前子图下的子节点才会显示在GView上

setCurrentSubview(subview)设置当前子图

subviewSubview要设置的Subview子图, 如果为null, 则返回最顶层

                    
                       gView.setCurrentSubview(aSubview);
                       gView.setCurrentSubview(aLinkSubview);
                       gView.setCurrentSubview(null);

getCurrentSubview()返回当前子图

subviewSubview当前子图, 入托在最顶层, 则返回null

                    
                       gView.getCurrentSubview();