A Nested Ellipse Shape

GoJS
1

Hello there,
I’m trying to make a nested Ellipse Shape (An Ellipse that has a smaller Ellipse inside it). Although, I’m not so good with the geometry strings but this is the result I’m getting so far,

image

Following is the code against the above shape,

go.Shape.defineFigureGenerator("Multivalued", (shape, w, h) => {
  const geo = new go.Geometry();

  // Outer ellipse
  geo.add(
    new go.PathFigure(w / 2, 0, true).add(
      new go.PathSegment(
        go.SegmentType.Arc,
        0,
        360,
        w / 2,
        h / 2,
        w / 2,
        h / 2
      ).close()
    )
  );

  // Inner ellipse
  const innerW = w * 0.9;
  const innerH = h * 0.9;
  const innerX = (w - innerW) / 2;
  const innerY = (h - innerH) / 2;

  geo.add(
    new go.PathFigure(innerX + innerW / 2, innerY, true).add(
      new go.PathSegment(
        go.SegmentType.Arc,
        0,
        360,
        innerX + innerW / 2,
        innerY + innerH / 2,
        innerW / 2,
        innerH / 2
      )
    )
  );

  geo.spot1 = GeneratorEllipseSpot1;
  geo.spot2 = GeneratorEllipseSpot2;

  return geo;
});

It’s just the weird straight lines (on the top right) that I can’t get rid of. Is there any way to remove them without messing up the shape? If so, a fix would be appreciated. Thank you.

2

That line is going from the start of the shape (the new go.PathFigure(w / 2, 0) x, y) to the start of the Arc command.

Try
new go.PathFigure(w, h/2, true)

instead

1 Like
3

It worked! Appreciated!