go js 学习笔记(一)

---恢复内容开始---

 

由于工作需要,需要gojs

简单来说

GoJS的绘图基于Html5的Canvas元素。一个Gojs文件基本构成包括画布,数据模型,模型内节点等。

一般来说通过id方式获取盒子,然后通过gojs的

go.GraphObject.make;来创建画布。
 var $ = go.GraphObject.make;
 通常会使用这样的方式来减少代码输入量。
go.GraphObject.make接收三个参数,第一个参数是go.js的类,第二个是这个类方法调用所需要的参数,第三个是详细的option。
var myDiagram =
$(go.Diagram, "stDiagram",
{   ... })
 以初始化画布为例,

gojs绘制的图表(Diagram)具有两个最基本的元素,就是点和线(NodeLink),并且他们可以自由组合组成一个组(Group)。

所有的元素都处在图层(Layer)上,并且可以对它们进行布局(Layout)。

每个Diagram都是通过数据模型(Model)来填充和确定Node的信息和Link的所属关系的。

并且我们只需要创建好NodeLink的模板以及数据模型,其他的是事情都交给gojs去处理。

它会通过Model.nodeDataArray方法和GraphLinksModel.linkDataArray方法自动加载模型并构建元素。

每一个NodeLink都是通过模板来描述他们的文本、形状、颜色等信息以及交互行为。

每个模板其实就是一个面板(Panel)(你可以将各种元素自由组合在它里面,也可以在它里面添加各种交互行为),比如说将TextBlockShapePicture等元素添加到这个Panel中,鼠标进入离开的交互行为也可以添加到Panel中,那么这个Panel就是一个模板。

每个Node的位置可以使用Diagram.layoutGroup.layout进行初始化设置,也可以基于交互行为进行拖拽。

gojs里的工具类可以为Diagram添加鼠标、键盘事件。

一般情况下Diagram都默认设置了几种交互行为,比如说拖拽、连线。我们也可以通过ToolManager对象来管理工具类,或者说来管理交互行为,比如说可以停止某些交互,或开启某些交互等。

每个Diagram同时也包含CommandHandler对象,它的作用是添加一些键盘命令,比如点Delete键删除元素,Ctrl+C复制、Ctrl+V粘贴、Ctrl+Z撤销等。但是CommandHandler也是被ToolManager管理的。

Diagram也提供通过鼠标中键滚动视图、放大缩小视图。

gojs还提供了图表的预览视图(Overview),用于了解大规模图表的概况,同时还提供了组件管理面板(Palette),用于管理创建的组件,并且支持将组件拖拽到Diagram中。

Diagram中,你可以选中Node或者Link,你会发现他们有少许的变化,比如在Node周围会增加选中框,选中Link会变色等。这些都是由Adornment对象控制的,你还可以用它来增加提示框、右键菜单等。

posted @ 2019-04-27 09:58  星陨的菲  阅读(2006)  评论(0编辑  收藏  举报