Drawing text after using fl_translate and fl_scale

31 views
Skip to first unread message

pvr...@btinternet.com

unread,
Mar 21, 2022, 5:09:50 PM3/21/22
to fltk.general
Hi,

I am extending Fl_Dial and I want to add a scale around the edge. I am using the following code:

void alarm_dial::draw_ticks() {
    for (double d = minimum(); d <= maximum(); d += step() * 10.0) {
        fl_push_matrix();
        fl_rotate(45 - angle_of(d));
        if (active_r()) fl_color(FL_BLACK);
        else fl_color(fl_inactive(FL_BLACK));
        fl_begin_loop();
        {
            fl_vertex(-0.25, 0.25);
            fl_vertex(-0.35, 0.35);
        }
        fl_end_loop();
        char text[5];
        snprintf(text, 5, "%g", d);
        // fl_draw(text, )
        fl_pop_matrix();
    }
}

to draw the scale markers "ticks". I now want to add text  to say the value at each tick, like on a clock face. The translate and scale are done in the method that calls this. I assumed that this would be carried forward to the next levelóf the matrix stack and it appears it does.

However the only way I can add text is to use fl_draw() and this uses pixel grids. I can't see in the latest documentation any API to do the same when using translate and scale. Is ther any way instead of translating the angle/radius into (X,Y) to do this.

By the way, it wasn't immediately obvious from the documentation that fl_rotate (at least) cumulates the rotation - i.e. a subsequent rotate is on top of the previous one(s).

Thanks Phil.

Matthias Melcher

unread,
Mar 23, 2022, 8:56:34 AM3/23/22
to fltk.general
fl_draw for text is one of the "quick" drawing functions that is not affected by the transformation matrix. You can use the transformed coordinates returned by these functions:


and this version of fl_draw to rotate the text:

Philip Rose

unread,
Mar 23, 2022, 12:50:08 PM3/23/22
to fltkg...@googlegroups.com

From: 'Matthias Melcher' via fltk.general
Sent: 23 March 2022 12:56
To: fltk.general
Subject: [fltk.general] Re: Drawing text after using fl_translate and fl_scale

 

fl_draw for text is one of the "quick" drawing functions that is not affected by the transformation matrix. You can use the transformed coordinates returned by these functions:

 

 

and this version of fl_draw to rotate the text:

 

 

Thanks Matthias,

I managed in the end to revert to good old fashioned trigonometry once I worked out what th transformation matrix did. I’ve not yet got the adjustment using the width and height returned by fl_measure() to get the text centred correctly on the point I want.

 

Regards Phil.

pvr...@btinternet.com schrieb am Montag, 21. März 2022 um 22:09:50 UTC+1:

Hi,

 

I am extending Fl_Dial and I want to add a scale around the edge. I am using the following code:

 

void alarm_dial::draw_ticks() {
    for (double d = minimum(); d <= maximum(); d += step() * 10.0) {
        fl_push_matrix();
        fl_rotate(45 - angle_of(d));
        if (active_r()) fl_color(FL_BLACK);
        else fl_color(fl_inactive(FL_BLACK));
        fl_begin_loop();
        {
            fl_vertex(-0.25, 0.25);
            fl_vertex(-0.35, 0.35);
        }
        fl_end_loop();
        char text[5];
        snprintf(text, 5, "%g", d);
        // fl_draw(text, )
        fl_pop_matrix();
    }
}

 

to draw the scale markers "ticks". I now want to add text  to say the value at each tick, like on a clock face. The translate and scale are done in the method that calls this. I assumed that this would be carried forward to the next levelóf the matrix stack and it appears it does.

 

However the only way I can add text is to use fl_draw() and this uses pixel grids. I can't see in the latest documentation any API to do the same when using translate and scale. Is ther any way instead of translating the angle/radius into (X,Y) to do this.

 

By the way, it wasn't immediately obvious from the documentation that fl_rotate (at least) cumulates the rotation - i.e. a subsequent rotate is on top of the previous one(s).

 

Thanks Phil.

--
You received this message because you are subscribed to a topic in the Google Groups "fltk.general" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/fltkgeneral/ai60fmt3Fsk/unsubscribe.
To unsubscribe from this group and all its topics, send an email to fltkgeneral...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/fltkgeneral/f1cf87e9-4068-4330-a331-036f330d0750n%40googlegroups.com.

 

Ian MacArthur

unread,
Mar 23, 2022, 1:25:39 PM3/23/22
to fltk.general
On Wednesday, 23 March 2022 at 16:50:08 UTC Phil wrote: 

Thanks Matthias,

I managed in the end to revert to good old fashioned trigonometry once I worked out what th transformation matrix did. I’ve not yet got the adjustment using the width and height returned by fl_measure() to get the text centred correctly on the point I want.


You might want to look at fl_text_extents() for this rather than fl_measure().

The fl_measure() function will return the bounding box for the string, including the ascender and descender space and kerning - which is what you need if you are aligning strings of text in a line or on a page, for example.
But for "raw labels" aligned to arbitrary positions and orientations (which is what I think you are trying to do) fl_text_extents() may be more useful, as it will return a (usually smaller) bounding box that describes only the "inked" area of the text, which for "randomly positioned" text may make for more convincing alignment of the label with the surrounds...

Or maybe not; depends!

pvrose

unread,
Mar 23, 2022, 3:24:32 PM3/23/22
to fltkg...@googlegroups.com

>--

Thanks Ian,

That makes sense. the text is just numbers, so it has no descenders. This explains why I seem to get the text aligned towards the bottom of the number.

Phil.
>You received this message because you are subscribed to the Google Groups "fltk.general" group.
>To unsubscribe from this group and stop receiving emails from it, send an email to fltkgeneral...@googlegroups.com.
>To view this discussion on the web visit https://groups.google.com/d/msgid/fltkgeneral/2244f95e-57b0-4e95-ae5a-2cd1e688e78bn%40googlegroups.com.

Philip Rose

unread,
Mar 23, 2022, 6:29:43 PM3/23/22
to fltkg...@googlegroups.com

From: 'pvrose' via fltk.general
Sent: 23 March 2022 19:24
To: fltkg...@googlegroups.com
Subject: Re: [fltk.general] Re: Drawing text after using fl_translate and fl_scale

 

On 23 March 2022, at 17:25, Ian MacArthur <imaca...@gmail.com> wrote:

>
>
>On Wednesday, 23 March 2022 at 16:50:08 UTC Phil wrote: 
>
>Thanks Matthias,
>
>I managed in the end to revert to good old fashioned trigonometry once I worked out what th transformation matrix did. I’ve not yet got the adjustment using the width and height returned by fl_measure() to get the text centred correctly on the point I want.
>
>You might want to look at fl_text_extents() for this rather than fl_measure().
>
>The fl_measure() function will return the bounding box for the string, including the ascender and descender space and kerning - which is what you need if you are aligning strings of text in a line or on a page, for example.
>
>But for "raw labels" aligned to arbitrary positions and orientations (which is what I think you are trying to do) fl_text_extents() may be more useful, as it will return a (usually smaller) bounding box that describes only the "inked" area of the text, which for "randomly positioned" text may make for more convincing alignment of the label with the surrounds...
>
>Or maybe not; depends!
>
>--

Thanks Ian,

That makes sense. the text is just numbers, so it has no descenders. This explains why I seem to get the text aligned towards the bottom of the number.

Phil.

The one problem I faced is that fl_text_extents() assumes the text is horizontal. So I still had  to mess about with trigonometry to convert the X and Y values into pixel displacements I needed to adjust the values returned by fl_transform_x/y().  However I have ignored the returned X value (it was either 0 or 1 depending on the first number in the text) and sussed whether to use the sin and cos values of the angle times the Y displacement and whether to add or subtract it.

In the end, the code is in the attached – method alarm_dial::draw_ticks().

The widget extends Fl_Line_Dial by adding two extra “hands” as alarm levels and calls the callback if the value changes or either alarm value changes. The callback then decides what to do based on the values of the three items.

There is still a wee problem in that the alarm hands don’t drag properly.

 

Thank you Ian and Matthias for pointing out the extra methods.

 

Phil.


>You received this message because you are subscribed to the Google Groups "fltk.general" group.
>To unsubscribe from this group and stop receiving emails from it, send an email to fltkgeneral...@googlegroups.com.
>To view this discussion on the web visit https://groups.google.com/d/msgid/fltkgeneral/2244f95e-57b0-4e95-ae5a-2cd1e688e78bn%40googlegroups.com.

--
You received this message because you are subscribed to a topic in the Google Groups "fltk.general" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/fltkgeneral/ai60fmt3Fsk/unsubscribe.
To unsubscribe from this group and all its topics, send an email to fltkgeneral...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/fltkgeneral/a58gvxdcowid5i890wjdq139.1648063465494%40email.android.com.

 

alarm_dial.cpp
alarm_dial.h

Ian MacArthur

unread,
Mar 25, 2022, 4:47:08 AM3/25/22
to fltk.general
On Wednesday, 23 March 2022 at 22:29:43 UTC Phil wrote:

The one problem I faced is that fl_text_extents() assumes the text is horizontal. So I still had  to mess about with trigonometry to convert the X and Y values into pixel displacements I needed to adjust the values returned by fl_transform_x/y().  However I have ignored the returned X value (it was either 0 or 1 depending on the first number in the text) and sussed whether to use the sin and cos values of the angle times the Y displacement and whether to add or subtract it.


Yes, true, it measures the text string in a "horizontal" state. When I suggested it (and this is true of fl_measure too of course) I didn't envisage you using the returned x,y parameters at all, only the w,h values. The x,y are not going to be *all* that useful in this context (possibly a bit more so with fl_measure, if the existed, because of the descenders and kerning, but even there...) as they (the x,y) are idealized offsets from the origin baseline, based on the extent of the glyphs "outside" the notional base. With fl_text_extents these are usually pretty small values. Usually... (I have some fonts with musical notation symbols where the offsets can be properly weird due to the arcane ways that the music glyphs are composited on top of each other - but for regular text strings you seldom see that!)

So TBH here I'd only be using the w,h, using that to compute the centre of the text box, rotate that, recompute the rotated origin for the string and then fl_draw the rotated text. 
Well, this is what I've done in the past, anyway, and it looked to be working OK -  though I just had a brief trawl around this PC and can't find a decent worked example to post...


Philip Rose

unread,
Mar 25, 2022, 3:44:58 PM3/25/22
to fltkg...@googlegroups.com

From: Ian MacArthur
Sent: 25 March 2022 08:47
To: fltk.general


Subject: Re: [fltk.general] Re: Drawing text after using fl_translate and fl_scale

 

On Wednesday, 23 March 2022 at 22:29:43 UTC Phil wrote:

Ian,

 

I only wanted to line the left edge of the text up against the tick mark on the dial face, I could have used either Y or H – Y being negative. It looks good enough – as they say, “the perfect is the enemy of the good”

 

Phil.

 

 

--

You received this message because you are subscribed to the Google Groups "fltk.general" group.
To unsubscribe from this group and stop receiving emails from it, send an email to fltkgeneral...@googlegroups.com.

Reply all
Reply to author
Forward
0 new messages