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!