Size of binary pngKnob on retina

I work on macbook pro 13’ retina.
I designed knobs of my plugin by drawing primitive elements in drawRotarySlider().
Eeach knob is drawing in Rectangle<float> knobSize(50.0f, 50.0f);

And now I want to draw them from binary *.png files.
So I used system Screenshot app to capture my knobs, and open it in GIMP 2.10 to polish them, remove background etc.

But unfortunately I found out in GIMP size of my knob is suddenly 100x100 (instead 50x50 like my knobSize rectangle).

And when I draw that knobs by:
g.drawImageTransformed(myKnob_png, AffineTransform::scale(1.0f));
The knob is two times bigger than it should be.

So what is recommended solution? Rescale the png file in GIMP, or better in code by AffineTransform::scale(0.5f) ?

Please notice I also want to make it looking nice on non-retina displays. Or maybe I should have some macro to recognize non-retina display and then make special code for that case?

I have no idea how to deal with that. Could anyone give some advice? Great thanks in advance.

Our solution to this is to have the images oversampled, like you do, and store them in a class called OversampledImage. This class basically is just a juce::Image with an additional float member variable that defines the scale of the image. Then there’s member functions like float getTrueWidth() or void drawWithTrueSizeAt(Point<int> topLeft, Graphics& g). When we draw the OversampledImage, we basically stretch it to fit into its true (non-oversampled) bounding box. That way, it will look fine on Retina and non-retina screens.

One thing to keep in mind is that the image resampling alrogithm in juce is not the best. It looks quite blocky, especially for any scale > 0.5 of for odd scalings like e.g. 0.6928. If you can avoid drawing from PNGs, do it. Drawing primitives always look better.

1 Like