目录
c.这边在加一个扩展(GraphObject.make 构建一个 Brush)
1.介绍
这边的零部件,指的是每一个节点,例如文本块、形状、图片和面板,可能包含更多图形对象
2.创建零部件
一.复杂版
(通过一个一个的塞配置到shape,到textblock里生成一个方框,在通过node.add添加进图例,并把node通过add添加进渲染的图标)
var node = new go.Node(go.Panel.Auto);//创建node
var shape = new go.Shape();//创建shape自定义图
shape.figure = "RoundedRectangle";//配置figure的边框圆弧
shape.fill = "lightblue";//配置边框颜色
node.add(shape);//把自定义shape添加进node
var textblock = new go.TextBlock();//创建文本自定义
textblock.text = "Hello!";//文本的显示内容
textblock.margin = 5;//文本的margin宽度
node.add(textblock);//把自定义textblock添加进node
diagram.add(node);//把node添加进图表
生成图像:
二.简洁版
通过GraphObject.make创建:支持以嵌套方式构建对象,其中缩进为您提供有关可视化树中深度的线索。
a.(小复杂版)重写上方复杂版代码:
var $ = go.GraphObject.make;//创建make
//添加入diagram,这边是创建画板后的id那个对象,可以看第一章
diagram.add(
//添加node
$(go.Node, go.Panel.Auto,
//添加shape
$(go.Shape,
{ figure: "RoundedRectangle",
fill: "lightblue" }),
//添加TextBlock
$(go.TextBlock,
{ text: "Hello!",
margin: 5 })
));
b.(优化版)重写上方小复杂版
var $ = go.GraphObject.make;
diagram.add(
$(go.Node, "Auto",
$(go.Shape, "RoundedRectangle", { fill: "lightblue" }),
$(go.TextBlock, "Hello!", { margin: 5 })
));
生成:a,b生成的图像与复杂版一样
c.这边在加一个扩展(GraphObject.make 构建一个 Brush)
eg:原本fill是蓝色,这边的go.Brush,使他变成了渐变色
diagram.add(
$(go.Node, "Auto",
$(go.Shape, "RoundedRectangle",
{ fill: $(go.Brush, "Linear",
{ 0.0: "Violet", 1.0: "Lavender" }) }),
$(go.TextBlock, "Hello!",
{ margin: 5 })
));
生成:
后面还有更简洁方法!