Angled Text

I’m trying to draw text along a straight line.

I draw the line with an arrow using the Path class and then get the angle of the line and try to rotate the label (have also tried DrawableText) from there. It appears to rotate the text about a point but not actually angle the text.

when I use the angle from the line it draws the label somewhere outside of the bounds ( such that I can’t see it).

here is what it look like when I use a -0.5 angle to rotate
Screen Shot 2022-05-09 at 3.30.22 PM
and here is the code


void resized() override
    {
        Rectangle<float> r = p.getBounds();
        r.reduce(2,2);
        AffineTransform tt = AffineTransform::rotation(-0.5);
        r = r.transformedBy(tt);
        t.setBoundingBox(r);
        l.setBounds(r.toNearestInt());
        
    }

I don’t think you can actually achieve that inside resized. You should do that inside Component::paint(...) and use drawText. Make sure to read the documentations about the functions you are using, so far I spot two general problems with you code:

  • AffineTransform::rotation rotates in radians (that’s the standard for an affine rotation) – by that 2pi are 360°. If you want to rotate by 45° you’d need to use 1/4pi
  • r.transformedBy doesn’t work that way. The rectangle always stays parallel to the coordinate systems axis. You can’t rotate a juce::Rectangle. This function calculates the biggest possible axis aligned rectangle that would fit inside the hypothetically transformed shape.

You’re just changing the bounds on the label, not how it’s painting the text.
Try calling setTransform on the label instead.

But that probably still won’t do what you want. The Label is still rectangular. Rotating the text within that rectangle can easily move the text partially or entirely out of that rectangle.

Try making a really big label with really small text in the middle, then applying different transforms to it. It can be tricky to get your head around how it actually works.

You’re calling AffineTransform::rotation will give you a rotation around the origin, which is the upper left corner of the label. Try the alternate form of AffineTransform::rotation where you specify the pivot point as well as the angle; use the center of the label as the pivot point (l.getWidth() * 0.5f, l.getHeight() * 0.5f).

https://docs.juce.com/master/classAffineTransform.html#aa8cbff1ba0c430acf5294cab160585a2

Matt

1 Like

You might also consider this other approach mentioned by Jules a long time ago: Text following Path

this was the ticket! Thanks!