I’m trying to implement a dot-based grid, similar to what other services use.
I implement grid in the following way:
new go.Panel("Grid")
.add(
new go.Shape("LineH", { strokeWidth: 1, strokeDashArray: [0, 9, 1, 0], stroke: '#aaaaaa' })
);
and it works well, most of the time
However, sometimes when moving the diagram around, the grid becomes “dashed” instead of “dotted”.
Probably you are aware of such issue, or I need to implement grid differently?
Thank you!
walter
2
That’s caused by anti-aliased drawing, when the drawn dot doesn’t match up exactly with the pixel locations on your screen. That can happen because:
- your diagram has been scrolled or panned (i.e. the value of Diagram.position isn’t integral)
- your diagram has been scaled (i.e. the value of Diagram.scale doesn’t line up with the screen pixels)
- your diagram has been scrolled on the page to a non-pixel-aligned position
- your page has been zoomed in or out
- your monitor/display’s pixels aren’t at integer multiples of its native screen resolution (perhaps at 150% for 4K displays?)
And maybe some other reasons I’m forgetting right now.
You could try decreasing the size of your dots, which might help in the most common cases, but cannot help in all of them:
grid: new go.Panel("Grid")
.add(
new go.Shape("LineH", { strokeWidth: 0.75, strokeDashArray: [0.75, 9.25] })
),
