# Trying to wrap my head around AffineTransform::rotation

I have a customized “drawRotarySlider”, where I am trying to make a “selector knob”. But I can’t figure out how to rotate my triangle with the knob movement. The below draws the triangle fine top center of knob area, when I omit the applyTranform line. When I include the applyTranform it does not behave as I expect, triangle is all over the place, so obviously I am misunderstanding the rotation, which I thought would center around the well center of the knob.

``````void drawRotarySlider (Graphics& g, int x, int y, int width, int height, float sliderPos,
const float rotaryStartAngle, const float rotaryEndAngle, Slider& slider) override
{
float radius = float (jmin (width / 2.2f, height / 2.2f) - 4.4f);
auto centreX = x + width / 2;
auto centreY = y + height * 0.4f;
auto angle = rotaryStartAngle + sliderPos * (rotaryEndAngle - rotaryStartAngle);
...

Path p;
auto pointerLength = radius / 2;

p.addTriangle (float (centreX), float (y), float (centreX + pointerLength),
float (y + pointerLength), float (centreX - pointerLength),
float (y + pointerLength));

p.applyTransform (AffineTransform::rotation (angle).translated (float (centreX),
float (centreY)));

g.setColour (Colours::black);
g.fillPath (p);
...
}
``````

As the comments say, the rotation by default is around the origin (0, 0). You are then translating this rotated triangle. You should use the `rotation (float angle, float pivotX, float pivotY)` method, supplying the point you want to rotate around.

2 Likes

Thanks a lot!