绘制一个几何图形。您能够掌握什么样的外形绘制以及它是怎样绘画和添补。
外形不像的TextBlocks和Pictures,外形不能包括任何其他对象。
基本图形
您能够设置Shape.figure属性一般为种种外形。还需要设置GraphObject.desiredSize或GraphObject.width和GraphObject.height参数,作为肯定外形尺寸。
在这些简朴的演示,该代码建立一个图形,并将其添加到画布中。
diagram.add(G(
go.Part,
'Horizontal',
G(
go.Shape,
'Rectangle',
{
width:40,
height:60,
margin: 4,
fill: null
}
),
G(
go.Shape,
'Ellipse',
{
desiredSize: new go.Size(40, 60),
margin: 4,
fill: null
}
)
));
添补和画笔
Shape.stroke属性指定用于绘制外形的表面刷。Shape.fill属性指定用于添补外形的背景。附加“stroke”的属性也掌握外形的表面绘制体式格局。Shape.strokeWidth属性指定表面的粗细。
diagram.add(G(
go.Part,
'Horizontal',
G(
go.Shape,
{
width:100,
height:40,
margin:2,
fill: '#394',
strokeWidth: 0
}
),
G(
go.Shape,
{
width:100,
height:40,
fill: null,
stroke: '#394',
strokeWidth: 4
}
),
G(
go.Shape,
{
width: 100,
height:40,
fill: null,
stroke: '#439',
strokeWidth: 5,
background: '#394'
}
)
));
角度和缩放
除了设置GraphObject.desiredSize或GraphObject.width和GraphObject.height申报的大小外形,还能够设置其他属性影响雅观。比方,您能够设置GraphObject.angle和GraphObject.scale属性。
diagram.add(G(
go.Part,
'Table',
G(
go.Shape,
{
row: 0,
column: 1,
width:40,
height:40,
margin: 5,
fill: '#492',
strokeWidth: 0
}
),
G(
go.Shape,
{
row: 0,
column: 2,
width: 40,
height: 40,
margin: 5,
fill: '#492',
strokeWidth: 0,
angle: 45
}
),
G(
go.Shape,
{
row: 0,
column: 3,
width: 40,
height: 40,
margin: 5,
fill: '#492',
strokeWidth: 0,
scale: 1.5
}
)
));