Custom geometry with different filling on PathFigures

GoJS
1

Hello,

I’m trying to represent a custom geometry within a Shape go Element, like this:

 new go.Shape({
      name: 'SHAPE',
      strokeWidth: 3,
      stroke: 'black',
      fill: 'lightblue',
    }).bind('geometry', 'shape', shape => {
      // Logic for creating a geometry with multiple PathFigures
})

The desired behavior that I’m looking for is to have some of the PathFigures filled (with ‘lightblue’ color) and some of them not. I’m trying this by setting the ‘isFilled = false’ field when constructing the PathFigures but it seems that when they are displayed, also those PathFigures are filled.

Can you please give me some insights here ? Am I taking the wrong path for this ?

Thanks for your help!

2

The Intrroduction page on Geometry path strings demonstrates this: Geometry Path Strings | GoJS

For example:

myDiagram.nodeTemplate =
  new go.Node()
    .add(
      new go.Shape({ fill: "lightblue" })
        .bind("geometryString", "geo")
    )

myDiagram.model = new go.GraphLinksModel([
  { geo: 'F M20 0 40 20 20 40 0 20z x M70 50 L100 70 50 80z' }
]);

produces:

image
image201×158 1.95 KB

Or, if you want to construct a Geometry programmatically:

myDiagram.nodeTemplate =
  new go.Node()
    .add(
      new go.Shape({
          fill: "lightblue",
          stroke: "black",
          geometry:  // same as 'F M20 0 40 20 20 40 0 20z x M70 50 L100 70 50 80z'
            new go.Geometry()
              .add(new go.PathFigure(20, 0, true)
                    .add(new go.PathSegment(go.SegmentType.Line, 40, 20))
                    .add(new go.PathSegment(go.SegmentType.Line, 20, 40))
                    .add(new go.PathSegment(go.SegmentType.Line, 0, 20).close()))
              .add(new go.PathFigure(70, 50, false)
                    .add(new go.PathSegment(go.SegmentType.Line, 100, 70))
                    .add(new go.PathSegment(go.SegmentType.Line, 50, 80).close()))
        })
    )

myDiagram.model = new go.GraphLinksModel([
  {}
]);
3

Thanks for your help!

What I am aiming to represent is a custom geometry of a polygon containing a list of holes (inside that polygon), holes which should not be filled, but transparent. Basically, the PathFigures will be overlapping each other.

Can I achieve this by using multiple PathFigures ? Or I should try other solutions ?

4

OK, try this:

myDiagram.nodeTemplate =
  new go.Node()
    .add(
      new go.Shape({
          fill: "lightblue",
          stroke: "black",
          geometry:  // same as "F M10 0 L110 10 L100 90 L0 100z M20 20 L40 30 L20 40z M50 20 L50 40 L70 30z"
            new go.Geometry()
              .add(new go.PathFigure(10, 0, true, true, false)  // false means PathFigure.isEvenOdd is false
                    .add(new go.PathSegment(go.SegmentType.Line, 110, 10))
                    .add(new go.PathSegment(go.SegmentType.Line, 100, 90))
                    .add(new go.PathSegment(go.SegmentType.Line, 0, 100).close())

                    // this is also clockwise; so it doesn't make a hole
                    // (if you do want it to make a hole, pass true as the fifth argument to the PathFigure constructor)
                    .add(new go.PathSegment(go.SegmentType.Move, 20, 20))
                    .add(new go.PathSegment(go.SegmentType.Line, 40, 30))
                    .add(new go.PathSegment(go.SegmentType.Line, 20, 40).close())

                    // this is anti-clockwise, so it makes a hole
                    .add(new go.PathSegment(go.SegmentType.Move, 50, 20))
                    .add(new go.PathSegment(go.SegmentType.Line, 50, 40))
                    .add(new go.PathSegment(go.SegmentType.Line, 70, 30).close())

                  )
        })
    )

Result:

image
image258×248 1.59 KB

Note that if you set PathFigure.isEvenOdd to true, then whether the subfigure is clockwise or not doesn’t matter. You can do that by passing true as the fifth argument to the PathFigure constructor. The result:

image
image258×248 1.54 KB