GoJS绘图基础学习笔记

一、创建画布

 

1、画布就是个div

<div id="myDiagramDiv" style="width:800px; height:300px; background-color: #DAE4E4;margin-bottom: 10px;"></div>

2、初始化画布

var myDiagram = new go.Diagram("myDiagramDiv");

或者

var $ = go.GraphObject.make; //GraphObject对象的静态函数GraphObject.make

var myDiagram =
$(go.Diagram, "stDiagram",
{ 
initialContentAlignment: go.Spot.Center, // 画布内居中显示
"grid.visible": true, //画布上面是否出现网格
allowZoom: false, //画布是否可以缩放
});

画布定义注意：
GraphObject.make为GoJS定义的静态函数，用于生成对象并赋予其类。
GraphObject.make的第一个参数必须是一个类类型。通常是一个字符串，可以设定TextBlock.text，Shape.figure，Picture.source或Panel.type。

 

二、定义模型

 var myModel = $(go.Model);
 // model中的数据每一个js对象都代表着一个相应的模型图中的元素
myModel.nodeDataArray = [
      { key: "Amos"},
      { key: "Saint"},
];
myDiagram.model = myModel; //将模型数据绑定到画布图上

 

Gojs中的数据模型分三种。

Model：最基本的（不带连线，如上面的例子）
GraphLinksModel ：连线图
TreeModel：树形图
GraphLinksModel中用model.linkDataArray为node节点连线保存数据模型信息。在连线图中，可以设定节点的连接方式。例子：

var myModel = $(go.GraphLinksModel);
myModel.nodeDataArray = [
    { key: "Amos"},
    { key: "Saint"}
];
myModel.linkDataArray = [
    { from: "Amos", to: "Saint" }
];
myDiagram.model = myModel;

三、定义node节点

 myDiagram.nodeTemplate =
$(go.Node, "Horizontal",
    {
          locationSpot: go.Spot.Center, // 节点内居中显示
          background: "indigo" //每个节点背景色
    },
    [$(go.TextBlock,{ ... }), $(go.Picture,{ ... }), $(go.Shape,{ ... }), $(go.Panel,{ ... })]  //分别为文本快（可编辑），图片，图形，面板（来保存其他Node的集合
);

四种节点。分别为文本快（可编辑），图片，图形，面板（来保存其他Node的集合） 。

 Shape包括Rectangle（矩形）、RoundedRectangle（圆角矩形），Ellipse（椭圆形），Triangle（三角形），Diamond（菱形），Circle（圆形）等可以直接调用的形状。
 （GoJS默认提供了很多形状然而Api写的很一般，需要自己去官方文档进行对照O.O）
 

 $(go.Shape,
    "RoundedRectangle",
        { margin: 10, width: 50, height: 50, figure: "Club",
          stroke: "#C2185B", fill: "#F48FB1", strokeWidth: 3
        },
        new go.Binding("figure", "fig")),

 $(go.Picture,
    { margin: 10, width: 50, height: 50, background: "#44CCFF" },
    new go.Binding("source", "url")),
    
$(go.TextBlock,
        "default text",
        { margin: 12, stroke: "white", font: "14px sans-serif" },
        new go.Binding("text", "name"))

通过js添加节点

myDiagram.add($(
    go.Part, 'Horizontal',
    $(go.TextBlock,
        { text: '一个文本块'}
    ),
    $(go.TextBlock,
        { text: '一个有颜色的文本块', background: '#1ad', stroke: '#FFF', width:150, height:20, textAlign: 'center', alignment: go.Spot.Center, margin:10 }
    ),
    $(go.TextBlock,
        { text: '一个可编辑文本块', background: '#FFF', width:150, height:20, alignment: go.Spot.Center, textAlign: 'center', editable: true, margin:10 }
    ),
));
 

三、定义Panel面板

面板中可以包含自己的node元素。每个面板建立自己的坐标系。面板有很多种类，诸如：

Panel.Position
Panel.Vertical
Panel.Horizontal
Panel.Auto
Panel.Spot
Panel.Table
Panel.Viewbox
Panel.Link
Panel.Grid
常用的有位置面板Panel.Position，纵向面板Panel.Vertical，横向面板Panel.Horizontal，表面板Panel.Table。

 Panel.Position：每个元素的位置是由position属性指定，默认定位在（0,0）左上角。例子：

myDiagram.add($(
    go.Part,
    go.Panel.Position,
    {
        background: '#eee',
        //position: new go.Point(0, 0), //定位面板相对diagram的位置
    },
    $(go.TextBlock,
        {text: '0, 0', background: '#6bc1ff' }
    ),
    $(go.TextBlock,
        {text: '100, 100', background: '#6bc1ff', position: new go.Point(100, 100) }
    ),
    $(go.Shape,
    {width: 50,height: 50,stroke: "#3385ff",fill: '#6bc1ff', position: new go.Point(100, 0) }
    ),
));
 

 Panel.Vertical：
面板的所有元素垂直从上到下排列。
Panel.Horizo??ntal：
类似纵向面板，排列不同。
垂直和水平两个面板支持Panel.defaultAlignment和Panel.defaultStretch属性，可以不必设置每个元素的对齐方式。

go.Panel.Horizontal,
{
    background: '#eee', defaultAlignment: go.Spot.Bottom
},

Panel.Table：
表格面板中具有GraphObject.row和GraphObject.column属性，面板会按照节点的行和列确定大小。
row和column的计数从0开始。

go.Panel.Table,
{
    //position: new go.Point(0, 0),
    background: '#eee',
},
$(go.TextBlock,
    {text: '一行一列', row: 0, column: 0, margin: 2, background: '#6bc1ff'}
),

 //当设置了行或列的长宽时，可以通过设置alignment: go.Spot.Left/Right/Center来设定表格内元素对齐方式。
$(go.RowColumnDefinition,
    { column: 0, width: 200, background: '#eee', }
),
$(go.Shape,
    'RoundedRectangle',
    { stroke: "#3385ff", fill: '#6bc1ff', row: 0, column: 0, alignment: go.Spot.Left, }
),
  //通过columnSpan和rowSpan属性，可以合并单元格。
 $(go.TextBlock,
    {text: '顶标题', row: 0, column: 0, columnSpan: 3, 
    stretch: go.GraphObject.Horizontal, margin: 2, background: '#6bc1ff'}
),

 四、数据绑定
GraphObject中的各种属性都可以进行数据绑定。在第一节我们建立基本模型图时已经用了数据绑定功能。
通常，在Template（nodeTemplate和linkTemplate）中，定义go.Binding的属性，并在DataArray（nodeDataArray和linkDataArray）中设定对应值。

Template中：

myDiagram2.nodeTemplate =
$(go.Node, "Auto",
  new go.Binding('location', 'loc'),
  $(go.Shape,
    { figure: "RoundedRectangle", fill: "white" },
    new go.Binding('fill', 'color'),
    new go.Binding('stroke', 'stroke')),
  $(go.TextBlock,
    { margin: 5 },
    new go.Binding('text', 'text')),
);
myDiagram2.linkTemplate = 
$(go.Link,
    $(go.Shape,
        new go.Binding('stroke', 'stroke'),
        new go.Binding('strokeWidth', 'thick')
    ),
    $(go.Shape,
        { toArrow: 'OpenTriangle', fill: null}
    )
)

DataArray中：

myModel2.nodeDataArray = [
    { key: "Amos", text: 'Amos', color: '#ff7a7a', stroke: "#ff4141", loc: new go.Point(0, 0) },
    { key: "Saint", text: 'Saint', color: '#6bc1ff', stroke: "#3385ff", loc: new go.Point(100, 100)}
];
myModel2.linkDataArray = [
    { from: "Amos", to: "Saint", stroke: '#333', thick: 2 }
];
设定数据绑定时，可以通过转换函数的第三个参数绑定构造函数。
new go.Binding('location', 'loc', go.Point.parse),
此处，go.Point.parse为一组二维数组。

myModel2.nodeDataArray = [
    { key: "Amos", text: 'Amos', color: '#ff7a7a', stroke: "#ff4141", loc: '0, 0' },
    { key: "Saint", text: 'Saint', color: '#6bc1ff', stroke: "#3385ff", loc: '100, 100'}
];

 

五、事件触发

GraphObject中的各种属性都可以进行数据绑定。在第一节我们建立基本模型图时已经用了数据绑定功能。
通常，在Template（nodeTemplate和linkTemplate）中，定义go.Binding的属性，并在DataArray（nodeDataArray和linkDataArray）中设定对应值。

Gojs具备三种基本事件：

针对图表的“基础事件”DiagramEvent。
处理鼠标键盘的“输入事件”InputEvents。
以及改变元素属性的“更改事件”ChangedEvent。
Gojs提供各种函数处理图表的交互行为。

由于上一篇研究的是Html5拖拽交互行为，此处依旧以输入事件的拖拽为例。在这里将官方Planogram的例子进行简化，并按步骤生成。
最终效果为：

 针对拖拽，Gojs提供GraphObject.mouseDragEnter, GraphObject.mouseDragLeave, GraphObject.mouseDrop 三种操作。分别对应鼠标拖拽进入，离开，与释放。