hi,
please look at this: http://codepen.io/cAndrei/pen/kkJxAg?editors=1010
could someone explain why there is a gap between the red rectangles?
and how to get rid of it?
thanks,
cAndrei
Anti-aliasing is bleeding through the subpixel positioning of the rectangles, which will vary according to the scale and the display resolution.
One solution would be to set background: "red" on the Panel.
if that’s the case then that’s bad news… because I need that background to be transparent…
and have some vertical lines inside that should connect but have 1px gaps… :(
They are smaller than 1 pixel gaps.
Can you show us what you want to do? Maybe there’s another solution.
could this be because, that thing being an adornment, it is actually positioned to some non-integer coordinates?.. would there be a way of forcing it to be at integer coordinates?
my goal is:
I assume you’re talking about implementing that list of lines and text underneath the “Label”. I don’t see how the rendering of solid rectangles affects this. Are you finding that the vertical line on the left side is not always continuous, since it is not implemented as a continuous stroke?
exactly… as you can see here:
That gap is bigger than what you were demonstrating at first. How are you implementing those lines? Or better yet, what is your itemTemplate? To simplify it, you can elide unrelated stuff, such as the button on the right.
return $GO(go.Adornment, 'Spot', { layerName: 'LOOSELAYER' },
$GO(go.Placeholder),
$GO(go.Panel, 'Vertical', {
alignment: offsetTop ? new go.Spot(1, 0.5, 11, 12) : new go.Spot(1, 0.5, 11, -12),
alignmentFocus: go.Spot.TopLeft, background: 'transparent',
name: 'linkMenu', itemTemplate:
$GO(go.Panel, 'Auto', {
height: 24,
isActionable: true,
alignment: go.Spot.TopLeft,
}, new go.Binding('width', 'width'),
$GO(go.Shape, 'Rectangle', {
spot1: go.Spot.TopLeft, spot2: go.Spot.BottomRight,
stroke: null, strokeWidth: 0, fill: 'transparent',
isPanelMain: true, stretch: go.GraphObject.Fill,
alignment: go.Spot.TopLeft, alignmentFocus: go.Spot.TopLeft
})
, $GO(go.Shape, 'LineH', {
name: 'LINE', alignment: new go.Spot(0, 0.5, 0, 0), alignmentFocus: go.Spot.LeftCenter,
stroke: defaultStroke, strokeWidth: 2,
width: 8
})
, $GO(go.Shape, 'LineV', {
name: 'LINE_T', height: 12, width: 2,
stroke: defaultStroke, strokeWidth: 2,
alignment: new go.Spot(0, 0, 0, 0), alignmentFocus: go.Spot.TopLeft
}, new go.Binding('visible', 'first', f => (!f || offsetTop)))
, $GO(go.Shape, 'LineV', {
name: 'LINE_B', height: 12, width: 2,
stroke: defaultStroke, strokeWidth: 2,
alignment: new go.Spot(0, 1, 0, 0), alignmentFocus: go.Spot.BottomLeft
}, new go.Binding('visible', 'last', b => !b))
, $GO(go.Shape, 'LineH', {
name: 'LINE_R',
alignment: go.Spot.RightCenter, alignmentFocus: go.Spot.RightCenter,
stroke: defaultStroke, strokeWidth: 2
}, new go.Binding('width', '', d => (d.width - d.textWidth - 12 - 5)))
, $GO(go.Panel, 'Auto', {
alignment: go.Spot.RightCenter,
padding: new go.Margin(0),
},
$GO(go.Shape, 'Circle', { width: 16, height: 16, fill: '#FF8800', strokeWidth: 0 }),
$GO(go.Shape, 'TriangleRight', { width: 6, height: 8, fill: '#FFFFFF', strokeWidth: 0, alignment: go.Spot.Center })
)
, $GO(go.TextBlock, {
font: '12px sans-serif', name: 'LABEL',
alignment: new go.Spot(0, 0.5, 12, 0), alignmentFocus: go.Spot.LeftCenter,
stroke: defaultTextStroke,
wrap: go.TextBlock.None
}, new go.Binding('text', 'text'))
)
}));
but… if I set a background on that I get this:
so… gap :)
when there are just the lines there is probably more gap because of more antialiasing at the end of the lines… :-S
Try setting strokeCap: "square" on the two “LineV” Shapes.
still not perfect… but good enough and probably nobody else will notice… I can see it because I know it’s there… :D
thanks!!
You could also try setting those lines to have strokeWidth: 1.5, which might help with the anti-aliasing, at least in some cases.