Icon View Thread

The following is the text of the current message along with any replies.
Messages 1 to 6 of 6 total
Thread Rotating text in a TLabel
Wed, Jun 11 2014 4:34 AMPermanent Link

Matthew Jones

Anyone know if it is possible to rotate text in a TLabel?

I found http://css-tricks.com/snippets/css/text-rotation/ which has a
..rotate definition, but how would I apply it? And how would I make it
get into the CSS?

Or, anyone know if it is coming in v2.0?

--

Matthew Jones
Wed, Jun 11 2014 6:00 AMPermanent Link

Rick

On 11/06/14 18:34, Matthew Jones wrote:
> Anyone know if it is possible to rotate text in a TLabel?
>
> I found http://css-tricks.com/snippets/css/text-rotation/ which has a
> .rotate definition, but how would I apply it? And how would I make it
> get into the CSS?
>
> Or, anyone know if it is coming in v2.0?
>

I don't know of a way to rotate a TLabel. It may be possible to directly
access the CSS programmatically in EWB but I haven't really looked. I'm
hoping that this kind of thing will be very open and flexible in V2.0.

Rather than using a TLabel you could try the TPaint control (note that
you will need to activate html5 support and run in an appropriate
browser). Just drop one on the form, make it a fairly large square to
accommodate the rotation, set it to transparent and add the following
code to the form's oncreate event:

Paint1.Canvas.Rotate(0.5);
Paint1.Canvas.StrokeText('Label Caption',20,20);

You should probably work with the Canvas.Font property to get the text
looking how you want.

This approach is not ideal but you may be able to get it to produce the
results you are after.

Hopefully we'll get some more info about V2.0 soon.

--
Rick
Wed, Jun 11 2014 7:00 AMPermanent Link

Matthew Jones

Rick wrote:

> Paint1.Canvas.Rotate(0.5);
> Paint1.Canvas.StrokeText('Label Caption',20,20);
>
> You should probably work with the Canvas.Font property to get the
> text looking how you want.

Thanks, that is working. The angle is in Radians, but there is a
function for that. This is how you can make a vertical "left hand"
label: (based on your example)

Paint1.Canvas.Font := lblInstruction.Font;
Paint1.Canvas.Rotate(Radians(270));
Paint1.Canvas.StrokeText(szLabel, -Paint1.Height + 8, (Paint1.Width -
lblInstruction.Font.Size) div 2);

The hard part was working out the negative height to get it visible.

Many thanks.

--

Matthew Jones
Wed, Jun 11 2014 7:03 AMPermanent Link

Matthew Jones

Matthew Jones wrote:

> (Paint1.Width -
> lblInstruction.Font.Size) div 2);

Spoke too soon on that. Add those together to make it work on a narrow
TPaint.

--

Matthew Jones
Wed, Jun 11 2014 7:22 AMPermanent Link

Matthew Jones

Rick wrote:

> Paint1.Canvas.StrokeText('Label Caption',20,20);

Also worth mentioning the FillText variant. I found this after trying
to work out why it was so blurry, and found tutorials on the web. The
StrokeText is for when you want an outline version.

Getting better all the time.

--

Matthew Jones
Wed, Jun 11 2014 8:04 AMPermanent Link

Matthew Jones

Matthew Jones wrote:

>  Paint1.Canvas.Rotate(Radians(270));

Nope, the hard part was working out why it didn't work again...

Boy, these things are fun. My thanks to
http://www.html5canvastutorials.com/advanced/html5-canvas-transform-rota
te-tutorial/ for the tutorial, and being able to fiddle with the
rotation in-browser.

I had it working, but when I updated it with new text, nothing appeared
on the rotated one. I was clearing just the same as the horizontal one,
but not working. Only when I sat sending new data and was amazed to
find that it updated the 4th time did I start to wonder that something
must be happening. Hmm, 8th time too... Anyone starting to spot the
problem?

Basically, the canvas remembers its rotation, so if you rotate
everything by 90 degrees, and then rotate it again by 90 degrees,
everything output is now at 180 degrees. And so on back to 0 and then
90. 4 turns of the circle to get an update.

I think it reasonable to have my customers have to click 4 times to get
it to show (kidding!), but in case anyone doesn't, the solution is of
course to leave it rotated back to 0 at the end of operation, and then
all will be well.


--

Matthew Jones
Image