GoJS 绘图 (三) ：shapes

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