towards a rectangle with rounded corners and font size estimation

[Matan]

Hi,

Just as part of easing into pyglet and opengl, I am wondering if anyone can explain the following line of code:

https://github.com/pyglet/pyglet/blob/5bc0f80e0446bc4ebb2b381370802f60320c0d8a/pyglet/shapes.py#L1178

Where it seems like 2 of the 4 corners of the rectangle repeat on the array. I just wanted to experiment making a rectangle shape with rounded corners by using bezier curves on the corners and would be happy to learn why opengl is being sent 6 points here.

Also in case you have any thoughts or suggestions about sizing such a rectangle to wrap around text such that adjusting the edges of the box to fully contain the text glyphs (or sizing the glyphs to match the size of the box can be accomplished). This is towards making text areas nicely surrounded by a shape. The current button implementation under `gui` seems to use an image instead. 

Thanks!

[Petr Viktorin]

On 03. 05. 23 1:04, Matan wrote:
> Hi,
>
> Just as part of easing into pyglet and opengl, I am wondering if anyone
> can explain the following line of code:
>
> https://github.com/pyglet/pyglet/blob/5bc0f80e0446bc4ebb2b381370802f60320c0d8a/pyglet/shapes.py#L1178
>
> Where it seems like 2 of the 4 corners of the rectangle repeat on the
> array. I just wanted to experiment making a rectangle shape with rounded
> corners by using bezier curves on the corners and would be happy to
> learn why opengl is being sent 6 points here.

A rectangle is made of two triangles:

D--C
| /|
|/ |
A--B

The vertex list has 3 points for each triangle: A,B,C, A,C,D.


If you're just starting out, I recommend trying a straight-edged shape
(a trapezoid, for example) before moving on to curved corners :)

> Also in case you have any thoughts or suggestions about sizing such a
> rectangle to wrap around text such that adjusting the edges of the box
> to fully contain the text glyphs (or sizing the glyphs to match the size
> of the box can be accomplished). This is towards making text areas
> nicely surrounded by a shape. The current button implementation under
> `gui` seems to use an image instead.

Look at TextLayout's content_width and content_height:
https://pyglet.readthedocs.io/en/latest/modules/text/layout.html#pyglet.text.layout.TextLayout

Classes like Label inherit these from TextLayout.

[Matan]

Thanks. Knocking off few points off my intelligence test for having to be told about triangles.

As you seem to be in the know, any off the cuff suggestions for how to render text off the viewport to match text size to a box by iterating font sizes, one which may recommended in the case of pyglet? e.g. drawing to coordinates off the scale v.s. using some invisible canvas or window? anything that would be less likely to break between pyglet revisions or be a more stable way to draw invisibly every now and then for size matching fonts to shapes? 

[Petr Viktorin]

On 03. 05. 23 12:07, Matan wrote:
> Thanks. Knocking off few points off my intelligence test for having to
> be told about triangles.
>
> As you seem to be in the know, any off the cuff suggestions for how to
> render text off the viewport to match text size to a box by iterating
> font sizes, one which may recommended in the case of pyglet? e.g.
> drawing to coordinates off the scale v.s. using some invisible canvas or
> window? anything that would be less likely to break between pyglet
> revisions or be a more stable way to draw invisibly every now and then
> for size matching fonts to shapes?

Sorry.I'm not in the know :(
I struggled with a similar problem a few years back, and ended up using
a monospace font instead. The pointers I gave are where I would start
today :(

> On Wednesday, May 3, 2023 at 12:26:40 PM UTC+3 Petr Viktorin wrote:
>
> On 03. 05. 23 1:04, Matan wrote:
> > Hi,
> >
> > Just as part of easing into pyglet and opengl, I am wondering if
> anyone
> > can explain the following line of code:
> >
> >

> https://github.com/pyglet/pyglet/blob/5bc0f80e0446bc4ebb2b381370802f60320c0d8a/pyglet/shapes.py#L1178 <https://github.com/pyglet/pyglet/blob/5bc0f80e0446bc4ebb2b381370802f60320c0d8a/pyglet/shapes.py#L1178>

> https://pyglet.readthedocs.io/en/latest/modules/text/layout.html#pyglet.text.layout.TextLayout <https://pyglet.readthedocs.io/en/latest/modules/text/layout.html#pyglet.text.layout.TextLayout>

>
> Classes like Label inherit these from TextLayout.
>

> --
> You received this message because you are subscribed to the Google
> Groups "pyglet-users" group.
> To unsubscribe from this group and stop receiving emails from it, send
> an email to pyglet-users...@googlegroups.com
> <mailto:pyglet-users...@googlegroups.com>.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/pyglet-users/7d8742bd-cd9e-45c2-82a7-526c71bd948en%40googlegroups.com <https://groups.google.com/d/msgid/pyglet-users/7d8742bd-cd9e-45c2-82a7-526c71bd948en%40googlegroups.com?utm_medium=email&utm_source=footer>.

[Matan]

Actually I'm happy to donate fees if someone feels awesomely fluent at developing such a component in any solid way that does not involve in-canvas drawing for iterating to fit the text size to any given height provided for the rounded-corner rectangle ... as far as I'm aware you cannot reliably fit text to a given height without iterating off-canvas because "font sizes" aren't fully telling.