GoJS 绘图 (十) ：链接（完结）

非定向链接

最简单的链接没有箭头指示方向。
该模板只包含一个形状为主要元素，因为这是在节点之间绘制的线条。链接的路线被计算后将得到一个路径的点。

diagram.nodeTemplate = g(
go.Node,
'Auto',
new go.Binding('location', 'loc', go.Point.Parse),
g(
go.Shape,
'RoundedRectangle',
{
fill: '# ddd'
}
),
g(
go.TextBlock,
{
margin: 5
},
new go.Binding('text', 'key')
)
);
diagram.linkTemplate = g(
go.Link,
g(
go.Shape
)
);
var nodeDateArray = [
{ key: 'apple', loc: '0 0'},
{ key: 'object-c', loc: '0 150'}
];

var linkDataArray = [
{ from: 'apple', to: 'object-c'}
];

定向链接

许多节点都需要用指示的方向性。 GoJS可以很容易地建立方向，只需添加一个形状并设置其Shape.toArrow属性。当然你也可以设置其它形状的属性，如Shape.fill以自定义箭头的外观。

var diagram = new go.Diagram('diagram');
var g = go.GraphObject.make;
diagram.nodeTemplate = g(
go.Node,
'Auto',
new go.Binding('location', 'loc', go.Point.Parse),
g(
go.Shape,
'RoundedRectangle',
{
fill: '# ddd'
}
),
g(
go.TextBlock,
{
margin: 5
},
new go.Binding('text', 'key')
)
);
diagram.linkTemplate = g(
go.Link,
g(
go.Shape
g(
go.Shape,
{
toArrow: 'OpenTriangle',
fill: null
}
)
)
);
var nodeDateArray = [
{ key: 'apple', loc: '0 0'},
{ key: 'object-c', loc: '0 150'}
];

var linkDataArray = [
{ from: 'apple', to: 'object-c'}
];
目前也就只能先写这么多吧！！入门的话问题不大了

关键字：JavaScript, var, shape

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！