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对象控制的，你还能够用它来增长提示框、右键菜单等。