Component anti-aliasing while zooming

I’m building a zoom feature for my GUI, but I get some aliasing when I zoom out too far.

grid1

I understand more or less what’s happening here: the zoom function calculates the gap between cells as less than 1, which can’t be represented by an int. But I’m not sure how to fix it, as setBounds() can only take a Rectangle<int> as argument (ie. there is no setBounds(Rectangle<float>)). Right now, I’m doing all the zoom calculations with floats and then converting them to ints at the end using Rectangle::toNearestInt() or toNearestIntEdges(), with the result pictured above.

I know that JUCE has anti-aliasing built into the graphical rendering on a low level; how can I exploit this from the Component class, so that my Components don’t alias?

1 Like

Have you tried using an AffineTransform::scale() instead? It’ll allow you to keep all your coordinates and sizes at one (integer) “design size”, and let the transform do the scaling without rounding to int.

1 Like

This seems right, but how will I use it with the Component class?

You probably want to do it on your main / top-level Component. Set it like this:

myComponent.setTransform(AffineTransform::scale(0.42));
2 Likes

@basteln ah yes, it’s so simple! My zoom function is working really well now. Thanks for pointing me in the right direction.

1 Like

Here is a follow-up question, related to zooming (not anti-aliasing).

I’d like to zoom in on a specific point in the Component (ie. center). It’s easy to zoom in on the origin (top left), but less so on a particular point. Can anyone give me some direction as to how this is usually done?

At this point I’m having trouble visualizing how to do it, so I don’t have any code to share, but I should mention that I’m using AffineTransform to achieve the zooming, just as @basteln suggested, and that the Component I’m zooming in on is contained in a ViewPort, meaning that the result of the centered zooming presumably has to relate to Viewport::setViewPosition (Point< int > newPosition) or Viewport::setViewPositionProportionately (double proportionX, double proportionY).

Use this variant of AffineTransform::scale() to scale around a pivot point. But more generally what you do is:
1.) translate (move) so that the pivot is at the origin
2.) scale around the origin
3.) translate back (i.e. invert 1)

2 Likes

That’s really interesting. But where do you set it?
If I set it in paint it quite rightly complains that I’m setting scale in the wrong place.
And if I set it in ‘resized’ it gets into an infinite loop.
I want to rescale my plug-in according to the window size. I’ve been doing it fine with manually scaling every component to the parent component (which works great BTW) But I wasn’t aware there could be an automatic scaling is possible. That would be even greater. :slight_smile:

So for example if I wanted to draw a full plug-in background bitmap at the correct user controlled scale, how you I do that using ‘setTransform’ in the editor?

Thanks.

One way to do this is to put a component around the component you want to scale. In the outer components resized() compute your transform and set it on the child.

This way you don’t have to complicate your layout code with a scale factor anymore!

1 Like

Thanks, that makes perfect sense. So, everybody’s PLuginEditor.cpp just holds a background component, which in turn holds all the children. So the editor file remains pretty empty? I’ll give it a go, thanks again.
edit I do worry a bit about all these pixel transforms and their impact on the renderer’s frame rate.