gojs常用API-画布操作
画布
获取当前画布的json | myDiagram.model.toJson(); |
加载json刷新画布 | myDiagram.model = go.Model.fromJson(model); |
删除选中节点或线 | myDiagram.commandHandler.deleteSelection(); |
获取选中的节点或线 myDiagram.selection |
|
获取画布所有节点对象 myDiagram.nodes |
|
节点
添加节点 | myDiagram.model.addNodeData(nodeData); |
删除节点 | myDiagram.model.removeNodeData(nodeData); |
选中单个节点(不能批量选中) | myDiagram.select(node); |
更改属性值 | myDiagram.model.setDataProperty(nodeData, 'color', "#ededed"); |
根据节点数据对象 更改节点属性 myDiagram.model.updateTargetBindings(nodeData); |
|
获取节点对象 | var node=myDiagram.findNodeForKey('key'); |
获取节点data | var nodeData=myDiagram.model.findNodeDataForKey('key'); |
批量删除节点 myDiagram.model.removeNodeDataCollection(nodes) |
|
模糊获取节点(版本1.68以上) 注意值类型,字符串和数值 myDiagram.findNodesByExample(data); 匹配方式默认为===运算符进行比较。 /abc/ 匹配包含“abc”的任何字符串 官网还有更多的匹配方式,这里就不列举了 |
|
线
添加线 | myDiagram.model.addLinkData(linkData); |
删除线 | myDiagram.model.removeLinkData(linkData); |
批量删除线 {Array|iterator} removeLinks removeLinkDataCollection(removeLinks); |
|
模糊获取线(版本1.68以上) 注意值类型,字符串和数值 myDiagram.findLinksByExample(data); 匹配 方式和模糊获取节点的规则一致 |
|
更改属性值 | myDiagram.model.setDataProperty(linkData, 'from', "-2"); |
获取节点的线 {string | null =} PID 端口ID findLinksConnected(PID) |
var node=myDiagram.findNodeForKey('key'); node.findLinksConnected().each(function(link) {console.log(link.data)}); |
获取进入节点的线 {string | null =} PID 端口ID findLinksInto(PID) |
var node=myDiagram.findNodeForKey('key'); node.findLinksInto().each(function(link) {console.log(link.data)}); |
获取从节点出来的线 {string | null =} PID 端口ID findLinksOutOf(PID) |
var node=myDiagram.findNodeForKey('key'); node.findLinksOutOf().each(function(link) {console.log(link.data)}); |
获取A-B节点之间的线 findLinksTo(othernode, PID, otherPID) |
var nodeA=myDiagram.findNodeForKey('key'); var nodeB=myDiagram.findNodeForKey('key'); nodeA.findLinksTo(nodeB).each(function(link) {console.log(link.data)}); |
树节点
根据甲,找甲的祖宗十八代(包括甲) node.findTreeParentChain(); |
|
根据甲,找甲的子孙十八代(包括甲) node.findTreeParts(); |
|
根据甲,找甲的父亲 node.findTreeParentNode(); |
var pNode=node.findTreeParentNode(); |
根据甲,找甲的孩子们 node.findTreeChildrenNodes(); |
|
根据甲,获取甲和其孩子的关系 node.findTreeChildrenLinks(); |
未测 |
gojs操作画布常用API
API | 用例 | |
---|---|---|
增 |
addNodeData(节点对象); addLinkData(线对象); |
|
删 |
removeNodeData(节点对象) removeLinkData(线对象); |
|
改 |
参数: data: nodeData或linkData propname:属性名 val:修改的值 setDataProperty(data, propname, val); |
|
查 |
根据key获取节点data对象 findNodeDataForKey('节点key'); 根据linkData模糊匹配线集合 (gojs1.68以上) findLinksByExample(linkData) |
|
gojs 函数实践
1、添加节点
- var CreateNode={
- key:getNextKey(), //设置key的方法,每个节点最好是有自己独立的key
- "category":"nodeStyleOne", //节点样式选择?nodeStyleOne? => 你自己定义的样式名
- "loc":"",
- "text":"节点的text值",//也阔以是动态的值
- source:“123.svg”,//也阔以是动态的路径
- }
- myDiagram.model.addNodeData(CreateNode);
2、动态加线
myDiagram.model.addLinkData({"from":连线起点的key, "to":连线终点key,"category":样式名});
gojs最佳教程: http://www.devtalking.com/categories/%E5%89%8D%E7%AB%AF/
https://liuxiaofan.com/2018/03/16/3521.html
https://www.jianshu.com/p/f91fbf085574
http://www.aubreyling.com/category/javascript/gojs/
参考以上考程,能基本上把gojs弄懂
gojs常用API-画布操作的更多相关文章
- gojs常用API (中文文档)
常用API 操作类API API 例子 应用场景 添加节点 myDiagram.model.addNodeData(node); var node = {}; node["key&q ...
- gojs常用API
操作类API: 添加节点: myDiagram.model.addNodeData(node); var node = {}; node["key"] = "节点Key& ...
- Java常用api和操作必背
1.数组排序 Java的Arrays类(java.util中)包含用来操作数组(比如排序和搜索)的各种方法. Arrays.sort(各种类型数组) 2.数组转字符串 1)打印数组时可用Arrays. ...
- Java学习笔记五 常用API对象一
常用API:字符串操作:String类,StringBuffer类,StringBulider类 字符串是最重要的数据类型之一,处理字符串也是一种语言的基本工作. 1.String类: public ...
- Javascript操作DOM常用API总结
基本概念 在讲解操作DOM的api之前,首先我们来复习一下一些基本概念,这些概念是掌握api的关键,必须理解它们. Node类型 DOM1级定义了一个Node接口,该接口由DOM中所有节点类型实现.这 ...
- node.js整理 02文件操作-常用API
NodeJS不仅能做网络编程,而且能够操作文件. 拷贝 小文件拷贝 var fs = require('fs'); function copy(src, dst) { fs.writeFileSync ...
- JS操作DOM常用API总结
<JS高程>中的DOM部分写的有些繁琐,还没勇气整理,直到看到了这篇博文 Javascript操作DOM常用API总结,顿时有了一种居高临下,一览全局的感觉.不过有时间还是得自己把书里面的 ...
- JavaScript 操作 DOM 常用 API 总结
文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前, ...
- [总结]JS操作DOM常用API详解
文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前, ...
随机推荐
- 练手WPF(四)——贪吃蛇小游戏的简易实现(上)
一. 游戏界面首先,按照惯例,编辑MainWindow.xaml,先将游戏界面制作好.非常简单:(1)主游戏区依然使用我们熟悉的Canvas控件,大小为640X480像素,设定每小格子为20px,所以 ...
- easyui 扩展 datagrid 数据网格视图
效果如图: js代码: $("#tdg").datagrid({ width: 200, url: "/Laboratory/ ...
- 查看java程序的指令码
java程序转化为JVM指令码分析 1.编写java文件(简易示例) /** * @author yew * @date on 2019/12/9 - 15:53 */ public class Ma ...
- Winform中使用FastReport的PictureObject时通过代码设置图片源并使Image图片旋转90度
场景 FastReport安装包下载.安装.去除使用限制以及工具箱中添加控件: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10 ...
- HTML 使用表格制作简单的个人简历
复习一下HTML,用表格做一个简单的个人简历 <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...
- c# Hashtable Synchronized vs SyncRoot
Synchronized vs SyncRoot 我们知道,在.net的一些集合类型中,譬如Hashtable和ArrayList,都有Synchronized静态方法和SyncRoot实例方法,他们 ...
- Mysql中的sql是如何执行的 --- 极客时间学习笔记
MySQL中的SQL是如何执行的 MySQL是典型的C/S架构,也就是Client/Server架构,服务器端程序使用的mysqld.整体的MySQL流程如下图所示: MySQL是有三层组成: 连接层 ...
- Facebook发布全新JavaScript引擎:Hermes
摘要: JS引擎开始升级了... 原文:技术栈中的爱马仕?Facebook发布全新JavaScript引擎:Hermes 作者:Carson_Ho Fundebug经授权转载,版权归原作者所有. 前言 ...
- [日期工具分享][Shell]为特定命令依次传入顺序日期执行
[日期工具分享][Shell]为特定命令依次传入顺序日期执行 使用方式: <本脚本文件名(必要时需要全路径)> <要执行的命令所在的文件名> <开始日期> < ...
- Skyshop.代码解析
MarmosetInput.cginc: Input结构定义: struct Input { #if defined(MARMO_PACKED_UV) || defined(MARMO_PACKED_ ...