流程图控件GoJS教程：突出显示节点设置（下）-控件新闻-慧都网

流程图控件GoJS教程：突出显示节点设置（下）

翻译|使用教程|编辑：吴园园|2020-01-15 13:33:20.247|阅读 749 次

概述：通常通过以某种方式“突出显示”节点（或节点或链接的一部分）使其脱颖而出。显示选择装饰时，选择会发生这种情况。但是，人们经常想突出显示与选择无关的零件。可以通过以下方式来实现：更改形状的填充或笔触，将图片源替换为另一个源，添加或移除阴影，等等。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接：

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

点击下载GoJS最新试用版

突出显示时更改节点大小

您可能需要增加节点或节点中元素的大小以使其突出显示。例如，您可以在GraphObject.scale或Shape.strokeWidth上具有Binding ：

  $(go.Node, ...
    $(go.Shape, ...,
      new go.Binding("strokeWidth", "isHighlighted", function(h) { return h ? 5 : 1; })),
    ...
  )

但是，这样做会更改对象的大小。这可能会使与该节点连接的所有链接的路由无效。在许多应用中这可能无关紧要，但是在某些情况下，某些链接的路线可能已由用户重塑。由于连接的节点移动或大小更改而对路由进行的任何重新计算都可能会丢失该路由。

如果这是您应用程序中的考虑因素，则可以考虑让每个节点都拥有一个附加的Shape，该形状将在显示时提供突出显示，否则将看不见。但是不要切换GraphObject.visible属性，因为这会导致节点更改大小。而是在0.0和1.0之间切换GraphObject.opacity属性。

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      {
        locationSpot: go.Spot.Center,
        // when the user clicks on a Node, highlight all Links coming out of the node
        // and all of the Nodes at the other ends of those Links.
        click: function(e, node) {
            var diagram = node.diagram;
            diagram.startTransaction("highlight");
            diagram.clearHighlighteds();
            node.findLinksOutOf().each(function(l) { l.isHighlighted = true; });
            node.findNodesOutOf().each(function(n) { n.isHighlighted = true; });
            diagram.commitTransaction("highlight");
          }
      },
      $(go.Panel, "Auto",
        $(go.Shape, "Ellipse",
          { strokeWidth: 2, portId: "" },
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 5, font: "bold 18px Verdana" },
          new go.Binding("text", "key"))
      ),
      // the highlight shape, which is always a thick red ellipse
      $(go.Shape, "Ellipse",
        // this shape is the "border" of the Auto Panel, but is drawn in front of the
        // regular Auto Panel holding the black-bordered ellipse and text
        { isPanelMain: true, spot1: go.Spot.TopLeft, spot2: go.Spot.BottomRight },
        { strokeWidth: 6, stroke: "red", fill: null },
        // only show this ellipse when Part.isHighlighted is true
        new go.Binding("opacity", "isHighlighted", function(h) { return h ? 1.0 : 0.0; })
            .ofObject())
    );

  // define the Link template
  diagram.linkTemplate =
    $(go.Link,
      { toShortLength: 4, reshapable: true, resegmentable: true },
      $(go.Shape,
        // when highlighted, draw as a thick red line
        new go.Binding("stroke", "isHighlighted", function(h) { return h ? "red" : "black"; })
            .ofObject(),
        new go.Binding("strokeWidth", "isHighlighted", function(h) { return h ? 3 : 1; })
            .ofObject()),
      $(go.Shape,
        { toArrow: "Standard", strokeWidth: 0 },
        new go.Binding("fill", "isHighlighted", function(h) { return h ? "red" : "black"; })
            .ofObject())
    );

  // when the user clicks on the background of the Diagram, remove all highlighting
  diagram.click = function(e) {
    diagram.startTransaction("no highlighteds");
    diagram.clearHighlighteds();
    diagram.commitTransaction("no highlighteds");
  };

  diagram.model = new go.GraphLinksModel(
    [
      { key: "Alpha", color: "#96D6D9" },
      { key: "Beta",  color: "#96D6D9" },
      { key: "Gamma", color: "#EFEBCA" },
      { key: "Delta", color: "#EFEBCA" }
    ],
    [
      { from: "Alpha", to: "Beta" },
      { from: "Alpha", to: "Gamma" },
      { from: "Beta", to: "Beta" },
      { from: "Gamma", to: "Delta" },
      { from: "Delta", to: "Alpha" }
    ]);