Making a custom Pill/Stadium shape


I would like to create a pill/stadium shape, like this :


It basically is a rectangle with text within, surounded by two semi circles on each side.
Until then I have been cheating by using 3 shapes (one rectangle and two circles with -50% margin).

I’m trying to fix this by creating my own shape using figures.js as an example, especially the Terminador shape.


It looks good, but the spacing of the shapes is still off. I think it as something to do with the spot1/spot2 parameters, but I’m unable to figure out the correct values for these.

Stadium(shape, w, h) {
        var geo = new go.Geometry();
        var fig = new go.PathFigure(.5 * w, 0, true);
        fig.add(new go.PathSegment(go.PathSegment.Arc, 270, 180, .75 * w, .5 * h, .5 * h, .5 * h));
        fig.add(new go.PathSegment(go.PathSegment.Arc, 90, 180, .25 * w, .5 * h, .5 * h, .5 * h));
        geo.spot1 = new go.Spot(.23, 0);
        geo.spot2 = new go.Spot(.77, 1);
        return geo;

Use this figure:

go.Shape.defineFigureGenerator("CapsuleH", function(shape, w, h) {
  var geo = new go.Geometry();
  if (w < h) {
    var fig = new go.PathFigure(w/2, 0, true);
    fig.add(new go.PathSegment(go.PathSegment.Bezier, w/2, h, w, 0, w, h));
    fig.add(new go.PathSegment(go.PathSegment.Bezier, w/2, 0, 0, h, 0, 0));
    return geo;
  } else {
    var fig = new go.PathFigure(h/2, 0, true);
    // Outline
    fig.add(new go.PathSegment(go.PathSegment.Line, w-h/2, 0));
    fig.add(new go.PathSegment(go.PathSegment.Arc, 270, 180, w-h/2, h/2, h/2, h/2));
    fig.add(new go.PathSegment(go.PathSegment.Line, w-h/2, h));
    fig.add(new go.PathSegment(go.PathSegment.Arc, 90, 180, h/2, h/2, h/2, h/2));
    return geo;


myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape, "CapsuleH",
      { fill: "white", portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer" },
      new go.Binding("fill", "color")),
      { margin: 8, editable: true },
      new go.Binding("text").makeTwoWay())

or some text with embedded newlines:

Oh, I guess you’ll want to set the Shape’s strokeWidth to zero.

I do not know enough about your diagram to say anything more about the rest of your question.

1 Like

Perfect, that’s exactly what I needed.

Thank you.

We’ll add the “Capsule” (a.k.a. “CapsuleH”) and “CapsuleV” figures to the RoundedRectangles.js extension file (and .ts in extensionsJSM and extensionsTS) for 2.3.

1 Like