GoJS 文本角度

Question

我正在使用 GoJS 创建流程图，我需要添加 'for' 循环。有一个六边形节点，我使用 angle: "90" 旋转它，但它会随着其中的文本旋转。如何设置六边形文字的对角。我是第一次使用 GoJS，对它不是很熟悉。这是节点模板代码。

    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
            strokeWidth: 2
            },
            new go.Binding('figure'),
            new go.Binding('fill')),
        $(go.TextBlock,
            {
            font: 'bold 11pt Helvetica, Arial, sans-serif',
            margin: 8,
            maxSize: new go.Size(160, NaN),
            wrap: go.TextBlock.WrapFit,
            editable: true
            },
            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); }
        }
    );

这是模型代码：

            model: new go.GraphLinksModel([  // specify the contents of the Palette
            { text: 'Start', figure: 'Circle', fill: '#00AD5F' },
            { text: 'Step' },
            { text: 'If', figure: 'Diamond', fill: 'lightskyblue' },
            { text: 'Loop', figure: 'Hexagon', fill: 'lightpink'/*, angle: '90'*/ },
            { text: 'I/O', figure: 'Parallelogram', fill: 'lightyellow' },
            { text: 'End', figure: 'Circle', fill: '#CE0620' }
        ], [
            // the Palette also has a disconnected Link, which the user can drag-and-drop
            { points: new go.List(/*go.Point*/).addAll([new go.Point(0, 0), new go.Point(30, 0), new go.Point(30, 40), new go.Point(60, 40)]) }
            ])
        });

和六边形代码：

go.Shape.defineFigureGenerator("Hexagon", function(shape, w, h) {
  var points = createPolygon(6);
  var geo = new go.Geometry();
  var fig = new go.PathFigure(points[0].x * w, points[0].y * h, true);
  geo.add(fig);

  for (var i = 1; i < 6; i++) {
    fig.add(new go.PathSegment(go.PathSegment.Line, points[i].x * w, points[i].y * h));
  }
  fig.add(new go.PathSegment(go.PathSegment.Line, points[0].x * w, points[0].y * h).close());
  freeArray(points);
  geo.spot1 = new go.Spot(.07, .25);
  geo.spot2 = new go.Spot(.93, .75);
  return geo;
});

谢谢。

Answer 1

你没有展示你的工作和成果，也没有展示你想要的东西。这是否符合您的要求？

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Shape, "Hexagon",
          { fill: "white", angle: 90 },
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 8 },
          new go.Binding("text"))
      );

"Hexagon" 图 Shape 的角度为 90，而不是 Node 的角度为 90。

GoJS 文本角度

GoJS angle of text

gojs