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
        }
    )
));