gojs拓扑图实现节点外围圆环按钮

实现效果：（并且鼠标移上去改变背景颜色)

官方案例参考：https://gojs.net/latest/samples/radialAdornment.html

珊妹儿这就给大家献上代码：

一、首先引用文件：

<script type="text/javascript" src="./js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="./js/gojs/go.js"></script>
<script type="text/javascript" src="./js/gojs/OverviewResizingTool.js"></script>
<script src="./js/gojs/DrawCommandHandler.js"></script>

二、在原有的拓扑图的基础上添加代码js:(这是定义一个圆环，写在init方法外面的)

    //制作一个圆形扇形和环形交叉的“按钮”。
    //第一个参数是按钮相对于中心放置的角度。
    //第二个参数是按钮将延伸的扫描角度；
    //默认情况下，这是90度，好像在整个圆周围正好有四个按钮。
  go.GraphObject.defineBuilder("SectorButton", function(args) {
    var angle = go.GraphObject.takeBuilderArgument(args, 0.0, function(a) { return typeof a === "number"; });
    var sweep = go.GraphObject.takeBuilderArgument(args, 90.0, function(a) { return typeof a === "number"; });
    // default brushes for "Button" shape
    var buttonFillNormal = "whitesmoke";
    var buttonStrokeNormal = "gray";

    var buttonFillOver = "#E7B5F4";
    var buttonStrokeOver = "#C709F7";

    var buttonFillDisabled = "darkgray";

    function makeAnnularWedge(angle, sweep, outer, inner) {
      // 几何体将以（0,0）为中心
      var p = new go.Point(outer, 0).rotate(angle - sweep / 2);
      var q = new go.Point(inner, 0).rotate(angle + sweep / 2);
      var geo = new go.Geometry()
        .add(new go.PathFigure(-outer, -outer))  // 始终确保几何体包括左上角
        .add(new go.PathFigure(outer, outer))    // 以及整个圆形区域的右下角
        .add(new go.PathFigure(p.x, p.y)  // 从外角开始，顺时针走
        .add(new go.PathSegment(go.PathSegment.Arc, angle - sweep / 2, sweep, 0, 0, outer, outer))
        .add(new go.PathSegment(go.PathSegment.Line, q.x, q.y))  // 然后逆时针旋转
        .add(new go.PathSegment(go.PathSegment.Arc, angle + sweep / 2, -sweep, 0, 0, inner, inner).close()));
      return geo;
    }

    var geo = makeAnnularWedge(angle, sweep, 80, 40);

    var pt = new go.Point(60, 0).rotate(angle);
    var align = new go.Spot(0.5, 0.5, pt.x, pt.y);
    args.forEach(function(obj) { if (obj instanceof go.GraphObject) obj.alignment = align; });

    var button =
      go.GraphObject.make(go.Panel, "Spot",
        {
          isActionable: true,  // 需要这样ActionTool才能截获鼠标事件
          enabledChanged: function(button, enabled) {
            var shape = button.findObject("ButtonBorder");
            if (shape !== null) {
              shape.fill = enabled ? button["_buttonFillNormal"] : button["_buttonFillDisabled"];
            }
          },
          // 为mouseEnter和mouseLeave事件处理程序保存这些值
          "_buttonFillNormal": buttonFillNormal,
          "_buttonStrokeNormal": buttonStrokeNormal,
          "_buttonFillOver": buttonFillOver,
          "_buttonStrokeOver": buttonStrokeOver,
          "_buttonFillDisabled": buttonFillDisabled
        },
        go.GraphObject.make(go.Shape,  // the border
          {
            name: "ButtonBorder",
            fill: buttonFillNormal,
            stroke: buttonStrokeNormal,
            geometry: geo
          })
      );

    //按钮形状内没有GraphObject——它必须作为按钮定义的一部分添加。
    //这样，对象可以是文本块、形状、图片或任意复杂的面板。

    // mouse-over behavior
    button.mouseEnter = function(e, button, prev) {
      var shape