Question

我的要求是增加悬停在连接节点的链接上的笔触宽度。

为此，我使用mouseEnter和mouseLeave可以进入那里，但无法到达笔触对象。

这是当前的实现：

 this.diagram.linkTemplate = $(go.Link,
      {
        mouseEnter: mouseEnter,
        mouseLeave: mouseLeave,
      },
      {
        name: "LINK",
        contextMenu: myContextMenu, cursor: "pointer",
        click: (e, link) => {
          e.diagram.commandHandler.showContextMenu(link);
        }
      },
      {
        selectionAdorned: true,
        selectionAdornmentTemplate: $(go.Adornment, "Auto",
          $(go.Shape,
            {  isPanelMain: true, stroke: colors["highlight"], strokeWidth: 3 }
          ),
          $(go.Shape,
            { stroke: colors["highlight"], scale: 2, strokeWidth: 1.5 },
            new go.Binding("toArrow", "text", function (text) { return toRelations[text] })
          ),
          $(go.Shape,
            { stroke: colors["highlight"], scale: 2, strokeWidth: 1.5 },
            new go.Binding("fromArrow", "toText", function (toText) { return fromRelations[toText] })
          )
        ),  // end Adornment
        layerName: "Foreground",
        reshapable: true,
        routing: go.Link.AvoidsNodes,
        corner: 10,
        // curve: go.Link.JumpOver
      },
      $(go.Shape,  // the link shape
        new go.Binding("stroke", "select", function (h) { return h ? colors["highlight"] : colors["link"]; }),
        new go.Binding("strokeWidth", "select", function (h) { return h ? 3 : 1; })
      ),
      $(go.Shape,
        {
          scale: 2
        },
        new go.Binding("fromArrow", "toText", function (toText) { return fromRelations[toText] }),
        new go.Binding("stroke", "select", function (h) { return h ? colors["highlight"] : colors["link"]; }),
        new go.Binding("strokeWidth", "select", function (h) { return h ? 1.5 : 0.5; })
      ),
      $(go.Shape,
        {
          scale: 2
        },
        new go.Binding("toArrow", "text", function (text) { return toRelations[text] }),
        new go.Binding("stroke", "select", function (h) { return h ? colors["highlight"] : colors["link"]; }),
        new go.Binding("strokeWidth", "select", function (h) { return h ? 1.5 : 0.5; })
      )
    );

鼠标进入和离开功能

function mouseEnter(e, obj) {
  var shape = obj.findObject("LINK");
  shape.strokeWidth = 50;
};

function mouseLeave(e, obj) {
  var shape = obj.findObject("LINK");
  shape.strokeWidth = 3;
};

我应该怎么做，请告诉我？

Answer 1

那几乎是正确的。试试这个：

  $(go.Link,
    {
      mouseEnter: function(e, link) { link.path.strokeWidth = 4; },
      mouseLeave: function(e, link) { link.path.strokeWidth = 1; }
    },
    $(go.Shape),
    $(go.Shape, { toArrow: "Standard" })
  );

如果需要，还可以更改链接路径的 Shape.stroke ，以更改其颜色。

在GoJS中更改悬停时节点链接的笔触宽度

1 个答案: