Rotate image as slider value changes

Audio Plugins
1

Ive just looked at [Solved] Make Custom Slider - Rotary to work out how to implement a custom graphic slider. This post uses blender and an array of images which update as the slider value changes. Instead of updating the image constantly, when slider changed, is there a way to rotate a single image?

2

Sure is, just use AffineTransform;


void paint(Graphics& g) override
{
    Image myImage = ImageCache::getFromMemory(BinaryData::myImage_png, BinaryData::myImage_pngSize);
    
    if (myImage.isValid())
    {
        float angleInRadians = MathConstants<float>::pi / 4; // Rotate 45 degrees
        float centerX = myImage.getWidth() / 2.0f;
        float centerY = myImage.getHeight() / 2.0f;

        AffineTransform rotation = AffineTransform::rotation(angleInRadians, centerX, centerY);
        g.addTransform(rotation);

        g.drawImageAt(myImage, 0, 0);
    }
}
1 Like
3

Great, thanks for both a speedy reply and a solution!

4

I’ve been mixing both your solution and https://www.youtube.com/watch?v=_IocXoXUWdQ&ab_channel=TheAudioProgrammer to try get a custom slider. I have implemented this into the editor header as well as the usual addAndMakeVisable and. setBounds in .cpp. Would you happen to know why the slider isnt responding?

class OtherLookAndFeel : public juce::LookAndFeel_V4
{
public:
    
    void drawRotarySlider (juce::Graphics &g, int x, int y, int width, int height, float sliderPos, float rotaryStartAngle, float rotaryEndAngle, juce::Slider &slider) override
    {
        float angleInRadians = juce::MathConstants<float>::pi / 4;
        float centerX = dial.getWidth() / 2.0f;
        float centerY = dial.getHeight() / 2.0f;
        
        dial = juce::ImageCache::getFromMemory(BinaryData::dial_png, BinaryData::dial_pngSize);
        g.drawImage(dial, 20, 20, 80, 80, 0, 0, 2000, 1997);

        juce::AffineTransform rotation = juce::AffineTransform::rotation(angleInRadians, centerX, centerY);
        g.addTransform(rotation);

        g.drawImageAt(dial, 0, 0);
    }
private:
    
    juce::Image dial;
};