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
        }
    )
));
    原文作者:谢鸢
    原文地址: https://segmentfault.com/a/1190000005349481
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞