Problem with corners in the RoundedRectangle

Hi, everyone, I have a problem when I implement RoundedRectangle on a Shape. Border is added and I can modify it with the strokeWith, but in the corners, the original rectangular shape persists. I can’t find a way to get rid of that excess and get the corners rounded properly. The Shape is inside a Group. Thanks in advance.


This is my code:

      $(go.Group, "Auto",
          mouseDrop: finishDrop,
          handlesDragDropForMembers: true, 
          mouseDragEnter: function(e, grp, prev) { highlightGroup(e, grp, true); },
          mouseDragLeave: function(e, grp, next) { highlightGroup(e, grp, false); },
          memberAdded: updateGroupCount,
          memberRemoved: updateGroupCount,
                wrappingColumn: 1
        new go.Binding("background", "isHighlighted", function(h) { return h ? "rgba(255,0,0,0.2)" : "transparent"; }).ofObject(),
        $(go.Shape, "RoundedRectangle",
          new go.Binding("background", "background"),
          { background: '#E2E2EA', fill: null, stroke: "#E2E2EA", strokeWidth: 1}),
          $(go.Panel, "Vertical",  // title above Placeholder
          $(go.Panel, "Horizontal",  // button next to TextBlock
            { stretch: go.GraphObject.Horizontal, background: "#E2E2EA" },
            new go.Binding("background", "background"),
            new go.Binding("width", "width"),
            new go.Binding("height", "height"),
                alignment: go.Spot.Top,
                editable: false,
                margin: 5,
                font: "bold 18px sans-serif",
                opacity: 0.75,
              new go.Binding("stroke", "stroke"),
              new go.Binding("text", "text").makeTwoWay())
            {padding: 12, alignment: go.Spot.TopLeft }),
        ),  // end Vertical Panel
      ));  // end Group and call to add to template Map

Set Shape.parameter1 to control the corner radius.

I already added it this way and it doesn’t work. It gives more curvature, but it still does if you take the bordering correctly.


The curve looks pretty good there, compared with it being too sharp in your first screenshot. The two corners are close to matching. What’s the problem?

Yes, the curve is fine, but I want to remove this part of the corner that’s left out of the border. That’s what I want to do.


Oh. That’s because you are setting or binding the GraphObject.background, which is always rectangular. Set or bind the Shape.fill instead.

Great! That worked. Thanks a lot.