Using brush at the stroke of a link which also has strokedasharray

GoJS
1

Hi,

When using brush at link stroke, is it able to achieve effects like below, i.e, brush at each stroke dash?

Currently I’m only be able to brush at whole link stroke.

var $ = go.GraphObject.make;
      myDiagram.nodeTemplate =
        $(go.Node, "Auto",
          new go.Binding("location", "loc", go.Point.parse),
          $(go.Shape, "RoundedRectangle", {
            fill: "lightgray"
          }),
          $(go.TextBlock, {
              margin: 5
            },
            new go.Binding("text", "key"))
        );

      var brush = new go.Brush(go.Brush.Linear);
      brush.addColorStop(0, "transparent");
      brush.addColorStop(1, "blue");

      myDiagram.linkTemplate =
        $(go.Link, {
            routing: go.Link.AvoidsNodes,
            curve: go.Link.JumpGap,
            corner: 10,
            reshapable: true,
            toShortLength: 7
          },
          new go.Binding("points").makeTwoWay(),
          // mark each Shape to get the link geometry with isPanelMain: true
          $(go.Shape, {
            isPanelMain: true,
            stroke: "transparent",
            strokeWidth: 5
          }),
          // $(go.Shape, {
          //   isPanelMain: true,
          //   stroke: "gray",
          //   strokeWidth: 3
          // }),
          $(go.Shape, {
            isPanelMain: true,
            stroke: brush,
            strokeWidth: 3,
            name: "PIPE",
            strokeDashArray: [10, 10]
          }),
          $(go.Shape, {
            toArrow: "Triangle",
            fill: "black",
            stroke: null
          })
        );

      var nodeDataArray = [{
        key: "Alpha",
        loc: "0 0"
      }, {
        key: "Beta",
        loc: "100 50"
      }];
      var linkDataArray = [{
        from: "Alpha",
        to: "Beta"
      }];
      myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

Thanks in advance,
Jinxin

2

That is correct – the Shape.stroke applies to the whole Shape, not to each dash or dot if you have set Shape.strokeDashArray.

Instead you could try setting Shape | GoJS API. This is demonstrated in Custom Relationships. However the dashes will not “turn” in mid-dash at corners in the stroke path.

3

Hi Walter,

Thanks you reply. What do you mean above, can you give me a sample, much appreciated.
What I want is gradient at each stroke dash, is it possible?

Thanks,
Jinxin

4

I was just saying that when using Shape.pathPattern, you will not get the curve in the dash near the corner of the link that you drew from Alpha to Beta.

You’ll want your Shape.pathPattern to be a short horizontal line Shape drawn with your gradient as the Shape.stroke.