GoJS 绘图 (三) ：shapes

2016-07-04 09:57:00

绘制一个几何图形。您可以控制什么样的形状绘制以及它是如何绘画和填充。
形状不像的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
}
)
));