Draw Rectangle on Retina Display

[marvu]

Hey, I’m facing a strange issue which is, as far as I tested it, related to the resolution of the Retina display. I’m drawing level meters in my audio plugin using the fillRect(…) function. The values used are all rounded to whole numbers (but declared as floats). Now, even when the level meter is zero (so no rectangle is drawn at all), there are three thin lines visible on a Retina display. On any other display it is all rendered fine.

Do you have an idea why? Is it some kind of rounding issue maybe?

I added some screenshots to explain the issue a bit better.

[lalala]

It’s hard to say without any code.
It’s just a shot in the dark, but do you use the opengl renderer and are your components backgrounds made up of images?
if so try to add :

#define JUCE_OPENGL_ALLOW_NON_POWER_OF_TWO_TEXTURES (1)

under the [BEGIN_USER_CODE_SECTION] at the top of your AppConfig.h

[otristan]

@jules, wouldn’t it be easier to not use a define there and check for ARB_texture_non_power_of_two extension and store it somewhere ?

[marvu]

Thank you for your suggestion, but I’m really just drawing simple rectangles… But I do a lot of computation for the size of the rectangles, since it must be resizable and also depending from the components size…
So I do things like that for computing the width of the meterse.g.:
const float meterWidth = ceil((getWidth() - scaleWidth - meterSpacing * (levels.size()-1)) / levels.size());

The lines are leftovers of the background rectangles, which have the colors of the visible meters. The meters theirselves are drawn over this background in the color of the parent component’s background to indicate the actual audio level. I think this is a common way to do these kind of things.

The interesting point for me is that the computation of the width of the background rectangles and the foreground rectangles (the actual always repainting levels) are computed the same, see above. Also their X-coordinate is the same. There are also no issues at all if I don’t use a Retina display.
I also tried drawing the rectangles with fixed values such as 15.0f for the width for example. Same result. So i guess, it must depend that I use fillRect with float values? Does it somehow behave differently on a Retina display maybe?

[daniel]

Might be related to this:

How to draw a thin line?

A line along an integer coordinate will be anti-aliased and thus two pixels wide. You could probably call g.drawLine(0.5f, 0.5f, w+0.5f, 0.5f) (not sure whether it has to be +0.5 or -0.5). Also there is Graphics::drawHorizontalLine/Graphics::drawVerticalLine. The top and left lines aren’t two pixels because they are clipped by the grapics context. There is also a Graphics::drawRectangle available. Chris

I remember that @fabian explained it somewhere else a bit more detailed, but I don’t find that post ATM.

[lalala]

I remember that @fabian explained it somewhere else a bit more detailed, but I don’t find that post ATM.

That’s the one you’re thinking about perhaps :

Rectangles and lineThickness

Hi lalala, Let me summarise your findings in a screenshot (including retina and non-retina displays): [image] Let me first try to explain the difference between roundedRect and drawRect. roundedRect uses a path internally to draw the rounded rect. You can get the same result with the following code: Path p; p.addRectangle (area.getX(), area.getY(), area.getWidth(), area.getHeight()); g.strokePath (p, PathStrokeType(1.f)); If you think about it, the expected result of drawing a path with li…

[daniel]

yes, that’s the one. Thanks @lalala