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）具有两个最基本的元素，就是点和线（Node和Link），并且他们可以自由组合组成一个组（Group）。

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

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

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

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

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

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

每个Node的位置可以使用Diagram.layout或Group.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对象控制的，你还可以用它来增加提示框、右键菜单等。