Objects with outlines display distorted

I have a bunch of small circles that I want to have an outline around, however if i apply a stroke to the circles, they appear distorted in the client. Even at 1:1 zoom it’s distorted.

If I create two stacked circles without strokes, one slightly larger than the other with a fill colour set to the stroke colour I want, then there is no distortion… See the top left, 1 to the right for an example (indicated by arrow).

What’s the reason for this and is it possible to resolve?

Are you working in trial mode? If so, everything gets rescaled to allow for that trial time bar to appear.

I haven’t seen similar issues before when there was no rescaling (everything anchored top-left, and a client in production mode). This issue is generally caused by rounding pixel values after rescaling it. But as you noticed, it’s very easy to cause something to rescale in the client.

Perhaps you can try to work with images (icons) instead of shapes. Icons generally have a fuzzier way to rescale (calculating the average colour over a pixel that’s partially overlapped).

I’m not working in trial mode, and actually, it distorts in the designer as well (I set the designer to 1:1 zoom).
I’d much prefer to use vector graphics than raster, as raster images don’t scale up without pixellation, as in using icon images. And there’s a potential for clients to be using two screen sizes.

I don’t understand why the stroke would be calculated differently to the shape, as they both use the same vertices… It seems like a bug to me

Are all sizes integers? If not, you can try to set the stroke to be 1px wide and the positions to be integer pixels. Then it shouldn’t do any rounding at all.

Something else you could try is playing with the antialiasing. Though there’s no setting for that in Ignition, so you’ll have to dig into the Java Swing code directly.

I’m having the same issue. I have a 10 x 10 px circle with a 1px stroke and it’s also distorted in the client at 1:1 size. This is in version 7.9.3.