GoJs 入门级开发学习1

GoJS是一款功能强大，快速且轻量级的流程图控件，可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图。

<div id="myDiagramDiv"></div>
 

初始化创建画布

<script>

var $ = go.GraphObject.make;var myDiagram =$(go.Diagram, "myDiagramDiv");

</script>

• Shape:形状——Rectangle（矩形）、RoundedRectangle（圆角矩形），Ellipse（椭圆形），Triangle（三角形），Diamond（菱形），Circle（圆形）等
• TextBlock:文本域（可编辑）
• Picture:图片
• Panel:容器来保存其他Node的集合 

    myDiagram.nodeTemplate =
                $(go.Node, "Spot",
                    { locationSpot: go.Spot.Center },
                    new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
                    { selectable: true, selectionAdornmentTemplate: nodeSelectionAdornmentTemplate },
                    { resizable: true, resizeObjectName: "PANEL", resizeAdornmentTemplate: nodeResizeAdornmentTemplate },
                    { rotatable: true, rotateAdornmentTemplate: nodeRotateAdornmentTemplate },
                    new go.Binding("angle").makeTwoWay(),
                    // the main object is a Panel that surrounds a TextBlock with a Shape
                    $(go.Panel, "Auto",
                        { name: "PANEL" },
                        new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
                        $(go.Shape, "Rectangle",  // default figure
                            {
                                portId: "", // the default port: if no spot on link data, use closest side
                                fromLinkable: true, toLinkable: true, cursor: "pointer",
                                fill: "white"  // default color
                            },
                            new go.Binding("figure"),
                            new go.Binding("fill")),
                        $(go.TextBlock,
                            {
                                font: "bold 11pt Helvetica, Arial, sans-serif",
                                stroke: lightText,
                                margin: 8,
                                maxSize: new go.Size(160, NaN),
                                wrap: go.TextBlock.WrapFit,
                                editable: true,
                                contextMenu: partContextMenu
                            },
                            new go.Binding("text").makeTwoWay())
                    ),
                    // four small named ports, one on each side:
                    makePort("T", go.Spot.Top, false, true),
                    makePort("L", go.Spot.Left, true, true),
                    makePort("R", go.Spot.Right, true, true),
                    makePort("B", go.Spot.Bottom, true, false),
                    {
                        // handle mouse enter/leave events to show/hide the ports
                        //鼠标移动 移出节点事件
                        mouseEnter: function (e, node) {
                            showSmallPorts(node, true);
                        },
                        mouseLeave: function (e, node) {
                            showSmallPorts(node, false);
                        }
                    }
                );

事件绑定
          
            var Select_Port = null;

	    //单机事件
            myDiagram.addDiagramListener("ObjectSingleClicked", function (e) {
                Select_Port = e.subject.part;
               //节点类型的判断处理
                if (e.subject.part instanceof go.Node) {
                    
                }
               
            });
            //右键事件
            myDiagram.addDiagramListener("ObjectContextClicked", function (e) {
                Select_Port = e.subject.part;
                var str = e.stroke;
                alert(1);
            });

简单罗列使用中的关键点 后续开发完成 补充完整code