Rotate/Spin ImageButton

Is it possible to rotate an imageButton clockwise or counter clockwise based on some angle theta? I have a picture of a dial and would like to rotate it as the user drags it horizontally or vertically.

I’ve tried something like

	int x = VolumeOSC1->getX() * cos((double)theta) + VolumeOSC1->getY() * sin((double)theta);
	int y = VolumeOSC1->getY() * cos((double)theta) - VolumeOSC1->getX() * sin((double)theta);
	juce::Justification *justice = new juce::Justification(36); 

	VolumeOSC1->setBoundsToFit(x,y,VolumeOSC1->getWidth(), VolumeOSC1->getHeight(),*justice,false);

to try and get the new x and y but its just seems to move the control all over lol

Thanks,
Aaron

Try Component::setTransform() which takes an AffineTransform. That has methods for rotating by a number of radians.

The Juce demo does something similar with whole the widgets page.

2 Likes

Thanks! that was what i was looking for.

And for anyone who finds this question helpful here is the code for my mouse drag event that stops at whatever angle you want.

    //[UserCode_mouseDrag] -- Add your code here...

	Component *button = (Component*)e.eventComponent;

	int distance = e.getDistanceFromDragStartX();

	if (distance <= -225)
		distance = -225;
	else if (distance >= 45)
		distance = 45;

	button->setTransform (AffineTransform::rotation 
						((float) (distance / (180.0 / double_Pi)),
						 button->getPosition().getX() + 
						(button->getWidth() * 0.5f),
						 button->getPosition().getY() + 
						(button->getHeight()  * 0.5f)));

	//VolumeOSC1
    //[/UserCode_mouseDrag]

–Aaron

5 Likes