操作类API:

添加节点:

myDiagram.model.addNodeData(node);
var node = {};
node["key"] = "节点Key";
node["loc"] = "0 0";//节点坐标
node["text"] = "节点名称";
myDiagram.model.addNodeData(node);

删除选中节点:

myDiagram.commandHandler.deleteSelection();
if (myDiagram.commandHandler.canDeleteSelection()) {
myDiagram.commandHandler.deleteSelection();
return;
}

获取当前画布的json

myDiagram.model.toJson()
var model= myDiagram.model.toJson();获得整个画布的json
//model=eval('('+model+')');若格式异常抓一下
var nodes=model.nodeDataArray;取出所有节点
var Links=model.linkDataArray;取出所有线

加载json刷新画布:

myDiagram.model = go.Model.fromJson(model);
model=myDiagram.model.toJson()
myDiagram.model = go.Model.fromJson(model);

通过节点key获取节点

myDiagram.model.findNodeDataForKey('key')

更改节点属性值

var node = myDiagram.model.findNodeDataForKey('key');//首先拿到这个节点的对象
myDiagram.model.setDataProperty(node, 'color', "#ededed");//然后对这个对象的属性进行更改

获取获得焦点的第一个元素,可为节点或者线

var node=myDiagram.selection.first();
console.log(node.data.key);

获取所有获得焦点的节点

myDiagram.nodes
var items='';
for(var nit=myDiagram.nodes;nit.next();){
var node=nit.value;
if(node.isSelected){
items+=node.data.key+",";
}
}
console.log(items);

遍历整个画布的节点信息写法

for(var nit=myDiagram.nodes;nit.next();){
var node=nit.value;
var key=node.data.key;
var text=node.data.text;
}

给节点添加线

myDiagram.model.addLinkData({ from: "节点的Key", to: "连到另一节点的key" })

选中节点

var newdata = { "text":"AAAA", "key":-33,"loc":"0 0" };
myDiagram.model.addNodeData(newdata);
var newdat2= myDiagram.model.findNodeDataForKey('-3');
console.log(newdat2);
var node = myDiagram.findNodeForData(newdat2);
console.log(node);
myDiagram.select(node);//选中节点

特殊案例API用法

myDiagram.findNodeForData(objNode)
myDiagram.findLinkForData(objLink)
//其中objNode或者objLink,只能从画布的json 对象取出,
//不能直接手写例如
var newdata={"text":"AAAA","key":-33,"loc":"0 0"};
var node = myDiagram.findNodeForData(newdat2);
//除了刚好是新建的节点外,,不然是获取不到这个对象的,因为添加节点时,gojs会自动给节点或者线添加一个属性

常用事件定义API:

节点选中改变事件:

selectionChanged: 回调的函数方法名
//该属性要写在$(go.Node,)内用大括号括起来,如右侧例子
myDiagram.nodeTemplate =
$(go.Node, "Horizontal",
{ selectionChanged: nodeSelectionChanged },
//节点选中改变事件,nodeSelectionChanged为回调的方法名
$(go.Panel, "Auto",
$(go.Shape,//节点形状和背景颜色的设置
{ fill: "#1F4963" },
new go.Binding("fill", "color")
),
)
);//go.Node的括号 //回调方法
function nodeSelectionChanged(node) {
if(node.isSelected) {//
//节点选中执行的内容
console.log(node.data);//节点的属性信息
console.log(node.data.key);//拿到节点的Key,拿其他属性类似
var node1 = myDiagram.model.findNodeDataForKey(node.data.key);
myDiagram.model.setDataProperty(node1, "fill", "#ededed");
} else {
//节点取消选中执行的内容
var node1 = myDiagram.model.findNodeDataForKey(node.data.key);
myDiagram.model.setDataProperty(node1, 'fill', "1F4963 ");
}
}
//节点选中的时候是一种颜色,取消选中是另一种颜色

节点双击事件:

doubleClick : function(e, node){
//node为当前双击的节点的对象信息
//该属性要写在$(go.node,)内用大括号括起来,如右侧例子
}
myDiagram.nodeTemplate =
$(go.Node, "Horizontal",
$(go.Panel, "Auto",
$(go.Shape,//节点形状和背景颜色的设置
{ fill: "#1F4963" },
new go.Binding("fill", "color")
),
{doubleClick : function(e, node){// 双击事件
handlerDC(e, node);//双击执行的方法
}
}
)
);//go.Node的括号 //双击执行的方法
function handlerDC(e, obj) {
var node = obj.part;//拿到节点的json对象,后面要拿什么值就直接.出来
var procTaskId = node.data.key;
var procTaskName = node.data.text;
var description = node.data.description;
var procTmplId = node.data.tmplId;
}
//该例子主要应用场景为,双击节点,得到节点的详细信息,弹出窗口修改节点的信息

从Palette拖过来节触发的事件:

myDiagram.addDiagramListener("externalobjectsdropped", function(e) {
console.log(e);
})
myDiagram.addDiagramListener("externalobjectsdropped", function(e) {
e.subject.each(function(n){
//得到从Palette拖过来的节点
console.log(n.data.key);
});
})

当前画布被拖动的节点:

myDiagram.addDiagramListener("Modified", function(e) {
myDiagram.isModified = false; iter = myDiagram.selection.iterator; while (iter.next()) {
var part = iter.value;
if (part instanceof go.Link) {
if ( ( part.data.from == 0 || part.data.from == undefined) || ( part.data.to == 0 || part.data.to == undefined ) ) {
myDiagram.model.setDataProperty(part.data, 'link-color', 'red');
console.log(part.data);
console.log("非法");
} else if(part.data.from > 0 || part.data.from < 0 ) {
var node = myDiagram.findNodeForKey(part.data.from);
if (!node) {
console.log("非法");
}
}else if(part.data.to > 0 || part.data.to < 0 ) {
var node = myDiagram.findNodeForKey(part.data.to);
if (!node) {
console.log("非法");
}
}
}
}
});

画布基本定义类API:

 定义gojs在全局的简洁符号:

var $ = go.GraphObject.make;

定义画布的基本属性:

myDiagram = $(go.Diagram, "myDiagram", //画布绑定的Div的ID
{
initialContentAlignment: go.Spot.Center, //画布的位置设置(居中,靠左等)
allowDrop: true, // must be true to accept drops from the Palette
"LinkDrawn": showLinkLabel, //
"LinkRelinked": showLinkLabel,
"animationManager.duration": 600, //画布刷新的加载速度
"undoManager.isEnabled": true,
//"toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,
allowZoom: true //允许缩放,false为否
isReadOnly: false //是否禁用编辑
//ismodelfied:true //禁止拖拽
});

画布元素属性定义类API:

定义单种节点:

myDiagram.nodeTemplate =
$(go.Node, "Horizontal",
{ selectionChanged: nodeSelectionChanged },
//节点选中改变事件,nodeSelectionChanged为回调的方法名
$(go.Panel, "Auto",
$(go.Shape,//节点形状和背景颜色的设置
{ fill: "#1F4963", stroke: null }
),
$(go.TextBlock,
{ font: "bold 13px Helvetica, bold Arial, sans-serif",//字体
editable:true,
stroke: "white",//颜色
margin: 3 },
new go.Binding("text", "key")
)//go.TextBlock,的括号
)//go.Panel 的括号
);//go.Node的括号
myDiagram.nodeTemplate=$(go.Node,***)
//***为对节点的定义

定义多种节点(画布上有多种节点):

myDiagram.nodeTemplateMap.add("A种节点",$(go.Node,***))
//一种类型的节点
myDiagram.nodeTemplateMap.add("Start",
$(go.Node, "Spot",
$(go.Panel, "Auto",
$(go.Shape, "Circle", {
minSize: new go.Size(40, 40),
fill: "#79C900",
stroke: null
})
)
)//go.Node的括号
);
//另一种类型的节点
myDiagram.nodeTemplateMap.add("End",
$(go.Node, "Spot",
$(go.Panel, "Auto",
$(go.Shape, "Circle", {
minSize: new go.Size(40, 40),
fill: "#DC3C00",
stroke: null
})
)
)//go.Node的括号
); //添加不同种类的节点
var node = {};
node["text"] = "2222";
node["key"] = "33";
node["loc"] = "0 0";
node["category"] = "Start";//category
myDiagram.model.addNodeData(node);

定义线:

myDiagram.linkTemplate=$(go.Link,***);

添加监听事件:

//添加监听节点生成事件
myDiagram.addDiagramListener("externalobjectsdropped", function(e) {
e.subject.each(function(n){
console.log(n.data.key);
});
})
//添加监听线生成事件
myDiagram.addDiagramListener("LinkDrawn", function(e) {
console.log(e.subject.data.to); })
//监听节点删除事件
myDiagram.addDiagramListener("SelectionDeleted", function(e) {
e.subject.each(function(n){
console.log(n.data.key);
});
})

go.Shape属性(形状): RoundedRectangle-圆角矩形

通用属性:

stroke 边框颜色 null为无边框,可填"#87CEFA","red"等
margin 边框间距  
visible 设置是元素是否可见 true为可见,false为不可见,
textAlign 文本位置 "center"居中
editable 文本是否可编辑 true,false
font 字体 "bold 8pt Microsoft YaHei, Arial, sans-serif"
fill 背景颜色 可填"#87CEFA","red"等
alignment
元素位置设置
go.Spot.BottomLeft/左下
go.Spot.BottomRight/右下
go.Spot.TopLeft/左上
go.Spot.TopRight/右上
alignment:go.Spot.TopRight
isMultiline 编辑时是否允许换行 默认true
maxLines:1
设置文本显示的最大行数  
minSize
最小大小 new go.Size(10, 16),控制了最大大小后,文本就会自动换行了
maxSize 最大大小  

特殊情况解决方案:

出现的问题 解决的方案
节点或者线删除不了

检查,画布的全局设置是否禁用删除,

或者节点,和线的设置禁用删除,

关键字 isReadOnly,或者节点绑定的事件有问题

重复调用定义画布报错 不能重复定义被绑定的div,应该用重新加载数据的API

gojs常用API的更多相关文章

  1. gojs常用API (中文文档)

    常用API   操作类API   API 例子 应用场景 添加节点 myDiagram.model.addNodeData(node); var node = {}; node["key&q ...

  2. gojs常用API-画布定义

    持续更新中 基础画布定义API画布初始位置 initialContentAlignment: go.Spot.Center,画布位置,定义后就不能拖动画布了,画布位置交由gojs管理 contentA ...

  3. gojs常用API-画布操作

    画布 获取当前画布的json myDiagram.model.toJson(); 加载json刷新画布 myDiagram.model = go.Model.fromJson(model); 删除选中 ...

  4. html5 canvas常用api总结(一)

    1.监听浏览器加载事件. window.addEventListener("load",eventWindowLoaded,false); load事件在html页面加载结束时发生 ...

  5. compass General 常用api学习[Sass和compass学习笔记]

    compass 中一些常用api 包括一些浏览器hack @import "compass/utilities/general" Clearfix Clearfix 是用来清除浮动 ...

  6. java基础3.0:Java常用API

    本篇介绍Java基础中常用API使用,当然只是简单介绍,围绕重要知识点引入,巩固开发知识,深入了解每个API的使用,查看JavaAPI文档是必不可少的. 一.java.lang包下的API Java常 ...

  7. C++ 中超类化和子类化常用API

    在windows平台上,使用C++实现子类化和超类化常用的API并不多,由于这些API函数的详解和使用方法,网上一大把.本文仅作为笔记,简单的记录一下. 子类化:SetWindowLong,GetWi ...

  8. node.js整理 02文件操作-常用API

    NodeJS不仅能做网络编程,而且能够操作文件. 拷贝 小文件拷贝 var fs = require('fs'); function copy(src, dst) { fs.writeFileSync ...

  9. js的常用api

    JavaScript常用API总结 原创 2016-10-02 story JavaScript 下面是我整理的一些JavaScript常用的API清单. 目录 元素查找 class操作 节点操作 属 ...

随机推荐

  1. node工具之node-ip

    node-ip node.js用来获取id地址的工具 use var ip = require('ip'); ip.address() // my ip address ip.isEqual('::1 ...

  2. Notepad++ 文件丢失了,找回历史文件方法

    一开始我还以为文件丢失找不到了,心凉了半截,后来找到了它的备份路径 C:\Users\Administrator\AppData\Roaming\Notepad++\backup

  3. 3、Eclipse 的SVN 插件

    3.Eclipse 的SVN 插件 3.1 简介 Subversive Eclipse 团队开发的SVN 插件. Subclipse Apache 的SVN 团队开发的Eclipse 插件. 3.2 ...

  4. kafka核心原理总结

    新霸哥发现在新的技术发展时代,消息中间件也越来越受重视,很多的企业在招聘的过程中着重强调能够熟练使用消息中间件,所有做为一个软件开发爱好者,新霸哥在此提醒广大的软件开发朋友有时间多学习. 消息中间件利 ...

  5. 微信公众号开发者中心配置 Token验证失败 终极解决方案

    请您检查这几项: 1. 在您的URL(服务器地址)页面里,直接Get获取echostr参数打印到页面上. 在火狐浏览器里Firebug里面看到echostr前面多了几个乱码. 把您开发者设置的URL页 ...

  6. linux内核配置与编译

    配置内核:配置硬件和软件需的部分. make config:基于文本模式的交互式配置.(一问一答) make menuconfig:基于文本模式菜单性配置.(直观简单高效) <*>会产生b ...

  7. Linux中FTP服务器配置

         1.FTP服务器的一些基本概念       (1)FTP连接方式     控制连接:标准端口为21,用于发送FTP命令信息.     数据连接:标准端口为20,用于上传.下载数据.      ...

  8. linux版宝塔安装Redis

    1安装服务 2配置设置 3安装PHP扩展 首先,我们来安装服务,进入管理面板--软件管理--运行环境--redis-点击安装,等待完成 完成之后开始第二步,配置设置.这一步根据自己需要进行配置.注意安 ...

  9. 模拟赛小结:2017-2018 ACM-ICPC Nordic Collegiate Programming Contest (NCPC 2017)

    比赛链接:传送门 本场我们队过的题感觉算法都挺简单的,不知道为啥做的时候感觉没有很顺利. 封榜后7题,罚时1015.第一次模拟赛金,虽然是北欧的区域赛,但还是有点开心的. Problem B Best ...

  10. 简单了解Oracle的回滚段

    因为上一次研究了Oracle的事务一致性,中间查阅资料的时候,看到这个地方与回滚段有关.所以就罗列了以下简单的知识.更为深层次的就不再深挖了,个人感觉对于事务的一致性和隔离级别是开发经理应该了解的,但 ...