样例代码
1、引入Gojs
<script src="go-debug.js"></script>
2、在页面创建个有高宽大小的div
<div id="myDiagramDiv" style="margin:auto;width:300px; height:300px; background-color:#ddd;"></div>
3、创建GO画板
var G = go.GraphObject.make;
_designer = G(go.Diagram, divId, {
// 添加 Diagram的一些列属性:下面有一些属性的说明
// 参考https://gojs.net/latest/api/symbols/Diagram.html
});
4、构建节点源Palette
var x = [
{
key: "start",
text: "开始",
figure: "Circle",
fill: "#4fba4f",
stepType: 1,
}
];
var myPalette =
G(go.Palette, divId, // 必须是DIV元素
{
maxSelectionCount: 3,
// nodeTemplateMap: _designer.nodeTemplateMap, // 跟设计图共同一套样式模板
// model:
});
//注入数据
myPalette.model = new go.GraphLinksModel(x);
//设置样式模板
this.updateTemplate = function (template) {
myPalette.nodeTemplateMap = template;
}
5、给面板刷新节点和连线
myDiagram.nodeTemplate =
$(go.Node, "Auto", // the Shape will go around the TextBlock
$(go.Shape, "RoundedRectangle",
// Shape.fill is bound to Node.data.color
new go.Binding("fill", "color")),
$(go.TextBlock,
{ margin: 3 }, // some room around the text
// TextBlock.text is bound to Node.data.key
new go.Binding("text", "key"))
);
// create the model data that will be represented by Nodes and Links
myDiagram.model = new go.GraphLinksModel(
[
{ key: "Alpha", color: "lightblue" },
{ key: "Beta", color: "orange" },
{ key: "Gamma", color: "lightgreen" },
{ key: "Delta", color: "pink" }
],
[
{ from: "Alpha", to: "Beta" },
{ from: "Alpha", to: "Gamma" },
{ from: "Beta", to: "Beta" },
{ from: "Gamma", to: "Delta" },
{ from: "Delta", to: "Alpha" }
]);
go.Diagram的属性描述
initialContentAlignment: go.Spot.Center,
布局于面板中心
center the content
allowDrop: true,
must be true to accept drops from the Palette
必须从Palette拖拽
“undoManager.isEnabled”: true
ctrl+z 撤销功能
“grid.visible”: true,
画布中出现方格线用于对其
“clickCreatingTool.archetypeNodeData”: { text: “Node” },
允许在画布上面双击的时候创建节点
“animationManager.isEnabled”: false,
关闭自动动画