Low resolution when caching to Image

In my app I have some animation on top of a circular dial image generated from some data, which I am writing to an Image object. The Image is the size of the Component. I am using getWidth() and getHeight() to set the size of the Image. However on rendering the Image looks like its around half the resolution, quite blocky and with out-of-phase anti-aliasing. I'm not sure what might be going wrong here.

Do I need to increase the Image size? Something to do with DPI ScaleFactor? This is not a retina device I'm testing on... (iPhone 4S)


Impossible to say without more detail. But yes, on higher res displays you probably would want to match the DPI to the display.


So I have a method with draws to an Image like so:

void drawRadialGraphToImage() 
    // ...
    radialGraph = Image(Image::PixelFormat::RGB, getWidth(), getHeight(), true);
    Graphics g (radialGraph);
    // ...
    graphDrawn = true;

It then uses the graphics context to draw the image. radialGraph is a member variable of the Component. 

In the Component's paint method I have 

        if (! graphDrawn)

        g.drawImage (radialGraph, 0, 0, getWidth(), getHeight(), 0, 0, getWidth(), getHeight());


Does it definitely re-create the image when the component size changes?

Might be easier + better to just make the component buffered-to-image

OK - so create a seperate component just for the background, buffer it to an image, and use that in the component with the animation on top of it? 

Yes, that could work

BTW iPhone 4S is a retina device (they introduced this with the iPhone 4). You need to find the physical display scale in the paint method and match that i.e Graphics::getInternalContext().getPhysicalPixelScaleFactor().

As Jules mentions, take a look at StandardCachedComponentImage in Component.cpp for how to do this but as you mention it might be easier to use this for your caching rather than rolling your own.

1 Like

Aha ok, the iPhone was passed on to me for testing thanks for the info