Gojs学习史(一):基本定义
1. gojs定义
初始化时,先简化gojs本身的方法:
var Go = go.GraphObject.make; //简化方法
1.1 画布定义
在声明了Go方法之后,接下来就是定义画布:
myDiagram = Go(go.Diagram,"myDiagramDiv",{
initialContentAlignment:go.Spot.Center, //居中
layout:Go(go.ForceDirectedLayout,{
defaultSpringLength: 30,
defaultElectricalCharge: 100
})
}); //定义画布用于装载具体内容
在这里比较需要注意的是,go.Diagram隔壁的id是html里面放置画布的div的id。此时myDiagram就成为一个对象了。按照我的理解,接下来要做的事情就是声明可以绘制在画布上的节点(node)和流程线(link)模板(敲黑板:这里声明的只是模板而已,在之后还需要载入数据生成真正的实例)。
1.2 节点定义
首先定义myDiagram的nodeTemplate,也就是节点模板:
myDiagram.nodeTemplate =
Go(go.Node,"Horizontal", //节点布局
Go(go.Panel, //节点面板定义
"Auto", //节点面板子元素布局
Go(go.Shape, "RoundedRectangle",//节点形状
//节点样式
{
fill:"red",
},
new go.Binding("fill","color"),
),{
doubleClick:function(e, node){ //双击事件
console.log(node.part.data);
},
cursor:"pointer"//改变光标样式
}
),
Go(go.TextBlock,
{
font:'bold 10pt helvetica, bold arial, sans-serif',
margin:4
},
new go.Binding("text","text")
)
); //定义了一份节点模板,该模板定义了两个模型,一个是形状(shape)里面的圆角矩形(RoundedRectangle),一个是文本(textBlock),go.Binding是申明动态绑定text属性。
Shape类型:
Shape | |
矩形 | Rectangle |
圆角矩形 | RoundedRectangle |
椭圆 | Ellipse |
菱形 | Diamond |
三角形(向右) | TriangleRight |
三角形(向下) | TriangleDown |
三角形(向左) | TriangleLeft |
三角形(向上) | TriangleUp |
减号线 | MinusLine |
加号线 | PlusLine |
x线 | XLine |
所有节点都可以通用的属性:
TextBlock:
节点、线通用的事件:
1.3 线定义
在有节点模板之后,还要定义一个流程线模板。即myDiagram的linkTemplate:
myDiagram.linkTemplate =
Go(go.Link,
{ adjusting: go.Link.Stretch, reshapable: true },
new go.Binding("points").makeTwoWay(),
Go(go.Shape,
{
isPanelMain: true,
stroke: "black"
}),
Go(go.Shape,
{
toArrow: "standard",
stroke:null
}),
Go(go.TextBlock,
{
textAlign: "center",
segmentOffset: new go.Point(0, -10),
font: "10pt helvetica, arial, sans-serif",
stroke: "#555555",
margin: 4
},
new go.Binding("text", "text")
)
); //定义了流程线模板(可是是虚线,实线,带箭头,不带箭头),这里包含了两个形状和一个文本,两个形状一个用来画线,一个用来画箭头,文本用来显示线上面的label。
1.4 数据格式定义
在定义完节点模板和流程线模板后,需要载入数据,生成实例。数据格式为:
var jsonData = {
nodeKeyProperty: "key",
nodeDataArray: [
{key:1,text:"节点a"},
{key:2,text:"节点b"},
{key:3,text:"节点c"},
],
linkDataArray:[
{from:1,to:2,text:"我是节点a指向节点b"},
{from:2,to:3,text:"我是节点b指向节点c"},
{from:3,to:1,text:"我是节点c指向节点a"},
],
}; //数据结构是固定的,包含了nodeKeyProperty、nodeDataArray、linkDataArray三个属性,分别是关联的主键,节点的数据,节点对应关系数据。
1.5 载入节点数据
myDiagram.model = go.Model.fromJson(jsonData);
在载入完model的数据之后,一块有节点及流程线的画布就绘制完成了。并且双击节点(doubleClick)时,会在控制台输出节点数据。
Gojs学习史(一):基本定义的更多相关文章
- JavaScript学习12 JS中定义对象的几种方式
JavaScript学习12 JS中定义对象的几种方式 JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下几种方式: 1.基于已有对象扩充其属性和方法 2.工 ...
- JavaScript学习12 JS中定义对象的几种方式【转】
avaScript学习12 JS中定义对象的几种方式 转自: http://www.cnblogs.com/mengdd/p/3697255.html JavaScript中没有类的概念,只有对象. ...
- Coursera台大机器学习基础课程学习笔记1 -- 机器学习定义及PLA算法
最近在跟台大的这个课程,觉得不错,想把学习笔记发出来跟大家分享下,有错误希望大家指正. 一机器学习是什么? 感觉和 Tom M. Mitchell的定义几乎一致, A computer program ...
- GoJS学习笔记
GoJS 和 GO 语言没有关系,它是一个用来创建交互式图表的 JavaScript 库. 基础概念 GraphObject 是所有图形是抽象基类,基本上 GoJS 中,万物皆 GraphObject ...
- B-spline Curves 学习之B样条曲线定义(4)
B-spline Curves: Definition 本博客转自前人的博客的翻译版本,前几章节是原来博主的翻译内容,但是后续章节博主不在提供翻译,后续章节我在完成相关的翻译学习. (原来博客网址:h ...
- GoJS学习笔记 (转)
目录 基础概念 开始绘制图形 1. 通过代码构建图形 2. 通过 GraphObject.make 构建图形 3. 使用 Model 和 Templates 创建图形 获取图形数据 获取所有 Node ...
- Struts2学习笔记 - Action篇<定义逻辑Action>
有三种方法可以使一个Action处理多个请求 动态方法调用DMI 定义逻辑Acton 在配置文件中使用通配符 这文章就谈论一下定义逻辑Action 这里主要关注的是struts.xml配置文件,一般情 ...
- scala 学习笔记(01) 函数定义、分支、循环、异常处理、递归
package yjmyzz import scala.io.StdIn object ScalaApp { def main(args: Array[String]) { println(" ...
- PHP学习之数组的定义和填充
数组就是把一组数据按顺序放在一起.PHP的数组和其它的语言数组有一点点不同:第一,保存的数据是可以是任何类型的:第二,数组的索引可以是数字,也可以是字符串. PHP的数组,说白了,就是关联数据每一条数 ...
随机推荐
- 博客迁移到reetsee.com
正如上一篇博客所言.眼下CSDN的博客已经基本完毕它的使命了.感谢CSDN带给我的全部美好回顾. 如今我想尝试一下自己维护一个博客,所以博客的全部内容都迁移到了reetsee.com. 以后博客更新会 ...
- mobiscroll手机端插件 好用(时间、日历、颜色)
http://demo.mobiscroll.com/range/rangepickertime/ 下载地址:http://download.mobiscroll.com/trial#/ios/dat ...
- 15-11-23:system指令
CMD命令:开始->运行->键入cmd或command(在命令行里可以看到系统版本.文件系统版本) 1. appwiz.cpl:程序和功能 2. calc:启动计算器 3. certmgr ...
- sql server Delete误操作后如何恢复数据
声明:本文是根据别人的经验https://blog.csdn.net/dba_huangzj/article/details/8491327写的总结 说明:update和delete时没有加where ...
- SpringMVC(一) 简单代码编写,注解,重定向与转发
SpringMVC是什么 SpringMVC是目前最好的实现MVC设计模式的框架,是Spring框架的一个分支产品,以SpringIOC容器为基础,并利用容器的特性来简化它的配置.SpringMVC相 ...
- Url 简单讲解
eg: http://sb.test.com/login?name=liming&password=twotigers 协议 http https ftp 域名 sb.test.com 则是域 ...
- NOIp2018模拟赛三十二
继续挂成傻逼 成绩:100+0+10(90)=110 A全场一眼题,C没取模挂八十分,然后没特判特殊情况又挂十分 A:[agc009b]tournament(太简单,咕了) B:[ATC2142]Bu ...
- SASS 使用(安装)
一.安装SASS 1.sass基于Ruby语言开发而成,因此安装sass前需要安装Ruby.(注:mac下自带Ruby无需在安装Ruby!) 2.安装过程中请注意勾选Add Ruby executab ...
- [POJ2823][洛谷P1886]滑动窗口 Sliding Window
题目大意:有一列数,和一个窗口,一次能框连续的s个数,初始时窗口在左端,不断往右移动,移到最右端为止,求每次被框住的s个数中的最小数和最大数. 解题思路:这道题是一道区间查询问题,可以用线段树做.每个 ...
- thinkphp5 编辑时 唯一验证 解决办法
若定义了相关的验证规则,如: namespace app\seller\validate; use think\Validate; class Goodsmtag extends Validate { ...