How to fill shape without overlap border stroke

GoJS
#1

look at this example,
https://jsfiddle.net/batobolg/sx64pzoe/1/

fill: "rgba(0, 200, 0, 0.75)", stroke: "rgba(0, 200, 0, 0.75)",

when the color have a alpha channel the half of border overlaps the shape, so the shape has a unnecessary double border.
any good idea to avoid this?

#2

The first problem is that you have the user resizing the Shape rather than the “Auto” Panel (in this case the whole Node). As the documentation repeatedly suggests, that is not likely what you really want, although it is possible – it’s just my guess that you don’t.

Second, that’s just how strokes are drawn – the geometric path is always in the middle of the stroke no matter how thick it is. So if you don’t want the stroke to overlap the fill of the Shape, you’ll need to use two Shapes. Since you want the stroke Shape to surround the fill Shape, you’ll need to use a second “Auto” Panel:

$(go.Node, "Auto",
  { resizable: true, },
  new go.Binding("deletable"),
  new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
  new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
  $(go.Shape, "RoundedRectangle",
    { // the outer stroke
      parameter1: 5,  // the corner has a large radius
      fill: null, stroke: "rgba(0, 0, 200, 0.75)", strokeWidth: 20,
      spot1: new go.Spot(0, 0, 10, 10), spot2: new go.Spot(1, 1, -10, -10)  // half the strokeWidth
    }),
  $(go.Panel, "Auto",
    { stretch: go.GraphObject.Fill },
    $(go.Shape,
      { // the inner fill
        fill: "rgba(0, 200, 0, 0.75)", strokeWidth: 0,
        spot1: go.Spot.TopLeft, spot2: go.Spot.BottomRight
      }),
    $(go.TextBlock,
      new go.Binding("text").makeTwoWay())
  )
);

For clarity, I changed the stroke color to a translucent blue rather than a translucent green.

You don’t need to set Shape.stroke to null on the inner shape because setting Shape.strokeWidth to zero means the stroke doesn’t need to be drawn.

#3

Thank you, add additional panel and shape I got it.

#4

When we resize the Node, the best way to do this is resize the Auto panel itself, so, desiredSize set to the Auto panel and resizeObjectName also set to the Auto panel Name right? thank you

#5

Yes, that’s right. You might need to set GraphObject.stretch to go.GraphObject.Fill on the contents of the “Auto” Panel, not on the border Shape.

#6

thank you, I will try to fix it.