Drawing SVG rotaries

General JUCE discussion
1

Hi, this is how I’m currently handling drawing custom SVG controls, is this the best way to go about things?

I have 2 elements, one which gets rotated, the other that doesn’t, loaded at startup:
p_rot = Drawable::createFromSVGFile( File( “c:\temp\knobs\knob1b.svg” ) );
p_rot_bg = Drawable::createFromSVGFile( File( “c:\temp\knobs\knob1a.svg” ) );

In the drawRotarySlider LAF method these 2 elements are scaled, rotated, and translated into position:
AffineTransform at = AffineTransform::scale( scale_x, scale_y ).rotated( angle, pivotX, pivotY ).translated( x, y );
p_rot->draw( g, 1.0, at );

AffineTransform at2 = AffineTransform::scale( scale_x, scale_y ).translated( x, y );
p_rot_bg->draw( g, 1.0, at2 );

Any comments/confirmations welcome. thx

1 Like
2

Hi, any comments on whether this is the best way to achieve this? thx

3

Does it work? :slight_smile: I think AffineTransforms are pretty fast…

4

Yup, it works, but noticeably slower than just using the primitives in the standard LAFs.

Does the SVG render through OpenGL or not do you know? Is this something under my control?

5

I think it renders though whatever renderer you are using, however the OpenGL renderer doesn’t really do all the fancy stuff you might if you were writing your own shaders.

You can probably get a massive speed up by caching the rendered knob as an image. (See the Graphics(Image &) constructor).

1 Like
6

Cheers Jim - I’ve just been thinking about caching actually as it’s the same thing over and over again - was looking into the CachedImage class, but will check out your suggestion also. thx

7

Yes, rendering the SVG into an image and then transforming the image is much faster - no SVG parsing each time…

1 Like
8

I don’t know whether the quality is better if you do a series of images having transformed the SVG first…

9

Depending of the content of your SVG, rotating and scaling an image might be more expensive than rotating the primitives and drawing them directly.
Also you avoid the artefacts/blur that comes with rotating images.

1 Like
10

Have you considered caching the drawable? All you need to do then is transform and draw it. No parsing at all. Should be super fast.

3 Likes
11

Not quite sure what you mean there - I only have 1 copy of the drawable stored in the LAF which is transformed each time the control is drawn…

12

Good point. for the smallish knobs I’m rendering though doesn’t seem to be impacting. Might see a difference in hidpi screens I guess when I try that

13

I see the confusion. I guess I should have said not having to parse all the paths each time…