Issue Regarding Rotating svg that is attached to knob

Hello Everyone!
I am a newbie to JUCE and to programming in general. I am having an issue where the image on my slider appears to rotate slightly off center. It almost appears if the getwidth() and getheight() functions are not giving me the correct height and width. Here is the code that I am using to rotate the .svg around the slider.

gainSkin->draw(g, 1.0f, rotator.rotated((float)sliderPosProportional * rotaryEndAngle, (float)(gainSkin->getWidth() / 2), (float)(gainSkin->getHeight() / 2)));

If someone could lead me to an example of this implementation that would be great! Thanks in advance!

You could try

gainSkin->draw(g, 1.0f, rotator.rotated((float)sliderPosProportional * rotaryEndAngle, gainSkin->getWidth() * 0.5f, gainSkin->getHeight() * 0.5f));

to correctly account for the missing half pixel if your size is an add number.

PS.: Just guessing

Huh. I implemented it and it still was doing the little jiggle around the center. I think the issue has to deal with the actual function because theoretically, wouldn’t getheight()/2 be more accurate than getheight() *0.5?

I tried your solution out and the slight movement is persisting.

This one has me stumped 8^)

I also was looking at this solution: [Solved] Drawable Rotation Around Center - #4 by mosgamal

However in that one the issue was with the renderer Inkscape. I checked the “viewbox” property in my .svg and it was: viewBox=“0 0 70 70” - which are nice whole numbers.

If getHeight() returns an odd integer and you do /2 on it, you’ll end up with the rounded down (truncated) result. That’s just how integer math works. You did the cast to float after the division.

If it returns a float, both do the same.

Regarding the view box: is your shape or whatever actually centred in your viewbox? What happens if you put two pixel wide cross hairs exactly through the centre of the viewbox?

1 Like

I fixed the same issue with this visual approach of using cross hairs. It made it apparent the wiggling had a stronger vertical oscillation, which hinted it could be something to do with the rotation’s Y pivot location.

This was the argument I had to pass in to the AffineTransform::rotation() pivotY argument to get my SVG rotating correctly:

path.getBounds().getCentre().getY()+1.5f

I had to offset the rotation’s Y pivot location by 1.5f, and that fixed the SVG rotation wiggling. I never figured out why it was 1.5, but I found this value by initially offsetting ±1.0f.
+1.0f reduced the wiggling a little, so I offset by 2.0f, that made the wiggling worse, so I went halfway between 1.0 and 2.0 and now it works perfectly.

I created my slider’s SVG using Inkscape and used Projucer’s SVG Path Converter tool.

I also had this issue with an SVG based knob drawable, created with Adobe XD that was slightly off-centre for unknown reasons. I ended up with some ugly hardcoded offset values that move the centre of my rotation transform to where it matches.

I personally consider this to be one of ugliest pieces of code I’ve written in the last few years, the values are a pure result of try & error, but it seems to work…

Try adding an invisible rectangle on the background of the SVG (with InkScape etc). There is a bug in JUCE SVG rendering so that the empty margins around the SVG object are ignored so the centre and scaling of the vector image are invalid.

1 Like

Hey! Thanks so much for this answer. This turned out to be the best way to fix it. I will make an edit on my post.