(2) GoJS Node简介
node
GoJS提供了非常简单的创建Node节点的方法,可将文本内容、结点形状、背景颜色、边距等属性通过数据绑定[go.Binding]直接绑定到对应的Node数据中。
本文简单介绍Node的创建过程及对应属性的绑定。
1.simple node
创建一个只包含文本的Node,利用数据绑定,设置节点的背景颜色、文本内容、节点形状。代码如下:
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.7.7/go-debug.js"></script>
<title>Document</title>
</head>
<body>
<div id="myDiagramDiv" style="width:300px; height:300px; background-color: #DAE4E4;"></div>
<script>
var $ = go.GraphObject.make;
//取创建的DIV作为画布
var diagram = $(go.Diagram, "myDiagramDiv", {
initialContentAlignment: go.Spot.Center,
"toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom//通过鼠标滚轮放大或缩小画布
});
diagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape,
new go.Binding("figure","shape"), //绑定Node的形状,也可直接设置Shape.figure
new go.Binding("fill", "color")), //绑定背景填充颜色
$(go.TextBlock,
{ margin: 5 },
new go.Binding("text", "key")) //绑定文本内容,显示在对应的Node上
);
//Node原始数据
diagram.model.nodeDataArray = [
{ key: "Alpha", color: "lightblue", shape:"Rectangle" },
{ key: "Beta", color: "yellow", shape:"Circle" },
{ key: "Gamma", color: "lightblue", fig: "Hexagon" },
{ key: "Delta", color: "lightblue", fig: "FramedRectangle" }
];
</script>
</body>
</html>
设置go.Shape属性可以给node添加不同的样式,example:
$(go.Shape, "Rectangle",{
figure: "Club"//Node形状
width: 40, //设置Node宽度,单位px
height: 60, //Node高度
margin: 4, //边距
fill: "green", //填充颜色
background:"yellow"//背景颜色
strokeWidth:2//线宽
})
设置go.TextBlock的属性可以给文本添加不同的样式,example:
$(go.TextBlock, { text: "a Text Block",
background: "lightgreen",
margin: 2,
width: 100,
height: 33,
alignment:go.Spot.Right
})
(2) GoJS Node简介的更多相关文章
- (3)Gojs model简介
(3)Gojs model简介 在GoJS中,model用来存储表的基本数据,包括node.link等具体对象和属性,与其在视觉上的展示效果不相关.model中往往只保存相对简单的数据,最方便且持久化 ...
- 《深入浅出Node.js》第1章 Node简介
@by Ruth92(转载请注明出处) 第1章 Node简介 一.Node的起源 高性能Web服务器的要点:事件驱动.非阻塞I/O. 选择JavaScript的原因:高性能.符合事件驱动.没有历史包袱 ...
- node 简介 起源
最近的node 的一篇文章阅读量很大,所以写一篇基础篇供大家分享,抛砖引玉,各取所需. 部分内容来源大神笔记. Node.js 简介:@@@@@@@@@@@@@@@@@@@ Node.js是目前非常火 ...
- 深入浅出node(1) Node简介
这一系列主要是自己在学习深入浅出node.js这本书的学习笔试,部分加入了自己的一些理解 分享给一起学习node的小伙伴 自己还是个初学者 有很多地方理解的不到位 一起交流 一 什么是node 1.1 ...
- 深入浅出Node.js (1) - Node简介
1.1 Node的诞生历程 1.2 Node的命名与起源 1.2.1 为什么是JavaScript 1.2.2 为什么叫Node 1.3 Node给JavaScript带来的意义 1.4 Node的特 ...
- node简介
1. Node.js是什么? 简单的说 Node.js 就是运行在服务端的 JavaScript. Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台. Node.js ...
- node必知必会之node简介
1.什么是node.js 按照: Node.js官方网站主页 的说法: Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript ...
- 【读书笔记】《深入浅出nodejs》第一章 Node简介
1. Node的官方网站: http://nodejs.org 2. Node的缘起: Ryan Dahl 打算设计一个高性能的Web服务器. Ryan Dahl 认为设计高性能Web服务器的要点在于 ...
- 《Node.js 高级编程》简介与第二章笔记
<Node.js 高级编程> 作者简介 Pedro Teixerra 高产,开源项目程序员 Node 社区活跃成员,Node公司的创始人之一. 10岁开始编程,Visual Basic.C ...
随机推荐
- POJ 2080:Calendar
Calendar Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 12546 Accepted: 4547 Descrip ...
- 【Codeforces】665E Beautiful Subarrays
E. Beautiful Subarrays time limit per test: 3 seconds memory limit per test: 512 megabytes input: st ...
- 【USACO07FEB】 Cow Relays
[题目链接] 点击打开链接 [算法] 朴素算法,就是跑N-1遍floyd 而满分算法就是通过矩阵快速幂加速这个过程 [代码] ...
- [odb-users] query results not being cached?
Burton, Craig crburton at tnsi.comWed Jun 6 13:58:03 EDT 2012 Previous message: [odb-users] query re ...
- JeePlus:API工具
ylbtech-JeePlus:API工具 1.返回顶部 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 0. http://wiki.jeeplus.org/docs/sho ...
- JAVA中的语法
分支条件判断: if(条件){} if(条件){}else{} if(条件){}else if(条件){}else{} 分支等值判断: switch(表达式){ case : break; defau ...
- chrome 跨域设置-(完善博客内容)
目的完善自己的一套 ajax前端开发流程,在网上扒了一份成功的案例. 出于一些原因往往需要将浏览器设置成支持跨域的模式,好在chrome浏览器就是支持可跨域的设置,网上也有很多chrome跨域设置教程 ...
- 学习css盒子模型
在这一周,我学习了css,在没有学习css之前,我一直都觉得布局很难,样式特别难调,但是学习了css盒子模型之后我就觉得欸,其实还挺简单的,下面就来看看我学习的css吧. CSS 盒子模型(Box M ...
- (分治)51NOD 1019 逆序数
在一个排列中,如果一对数的前后位置与大小顺序相反,即前面的数大于后面的数,那么它们就称为一个逆序.一个排列中逆序的总数就称为这个排列的逆序数. 如2 4 3 1中,2 1,4 3,4 1,3 1是 ...
- 计算几何值平面扫面poj2932 Coneology
Coneology Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 4097 Accepted: 859 Descript ...