(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 ...
随机推荐
- 【poj2774】Long Long Message
用个分隔符将两个字符串连接起来,再用后缀数组求出height数组的值,找出一个height值最大并且i与i-1的sa值分别在两串字符中就好 #include<algorithm> #inc ...
- 函数计算 触发式计算 日志 MP3 图片 合成视频
函数计算 触发式计算 日志 MP3 图片 合成视频 [start_time]:20120511 06:59:11 [20120511 06:59:11_0.4950568322522534]: ...
- DEDE织梦 后台特别卡,有时响应超时的解决办法
跟大家一样,大致情况是: 1.打开后台首页第一次没问题,但是刷新或者点其他菜单就一直卡着了. 2.关掉浏览器重新进首页没问题,但是一旦进了首页再打开php页面就卡死了. 3.服务器返回Maximum ...
- Resharper 实现接口的方式
- [Codeforces 140C] New Year Snowmen
[题目链接] https://codeforces.com/problemset/problem/140/C [算法] 显然 , 我们每次应优先考虑数量多的雪球 将雪球个数加入堆中 , 每次取出数量前 ...
- 开发第一个Template
TEMPLATE的静态变量,当时我们一句话就带过了.TEMPLATE静态变量下面有好几个键值对,把"BACKEND"后面的值改成我们想要用的模板引擎就可以了.我们项目使用Djang ...
- Helios Service Release 2安装SVN
Eclipse Helios Service Release 2安装SVN地址:subclipse http://subclipse.tigris.org/update_1.6.x 1.使用方式:he ...
- J20170527-ts
足場 立脚点.脚手架 scaffold ハイパーリンク 超链接 hyperlink アンカータグ 锚标签 でしゃばり 多嘴.多事.多管闲事的人,好出风头的人 でしゃばる 多管闲事 節介 ...
- [转载]android常用的API接口调用
原文地址:android常用的API接口调用作者:宋耀 显示网页: Uri uri = Uri.parse("http://www.google.com"); In ...
- 学习css盒子模型
在这一周,我学习了css,在没有学习css之前,我一直都觉得布局很难,样式特别难调,但是学习了css盒子模型之后我就觉得欸,其实还挺简单的,下面就来看看我学习的css吧. CSS 盒子模型(Box M ...