Page 1 of 4

How to draw a rectangle with only two rounded corners?

Posted: Thu Nov 18, 2021 1:54 pm
by golife
Hi to all )

I have been struggling with trigonometric functions and looking up mathematical formulas for plotting to draw rectangles that have two upper rounded corners and two usual lower 90 degree corners.

This is required for an app supporting Material Design where it is used and forms the outline of a field. A field here consists of several elements, and I am using a group to combine all those elements as a field object to make it look and behave like a text field as defined in Material Design.

Reference: https://material.io/components/text-fields#usage

I was thinking using our graphics "line" or "curve" tool, but the results are not promising so far.

Conceptionally, the upper round of the upper corners are defined by circles inside the rectangle and touching the left or right and upper lines at two offset points from the corners.

I was thinking of drawing the rectangle based on x,y coordinates starting at some coordinate point and going all the way around. But how are the rounded x,y coordinates calculated? Or is this the wrong approach? Or could it be better done using SVG paths?

Has anybody done something like this before, or how to approach such a problem?

Ideally, of course, there is a predefined object that can just be drawn like the "rounded rectangle" we have. The result must be an object for which at least all the standard properties can be defined: Border size/color, background color, etc.

Thank you for ideas... )

Roland (golife)

Re: How to draw a rectangle with only two rounded corners?

Posted: Thu Nov 18, 2021 2:18 pm
by richmond62
Presumably you could make a vector image in Inkscape, export it as an SVG and then bring
it into a LiveCode stack?

Re: How to draw a rectangle with only two rounded corners?

Posted: Thu Nov 18, 2021 2:46 pm
by richmond62
I drew a picture in GIMP:
-
arch.png
arch.png (8.28 KiB) Viewed 10778 times
-
Imported it into Inkscape and traced the bitmap to end up with a vector:
-
SShot 2021-11-18 at 15.40.43.png
-
and then used my own SVG importer stack to turn it into an SVG widget in LiveCode:
-
SShot 2021-11-18 at 15.43.48.png

Re: How to draw a rectangle with only two rounded corners?

Posted: Thu Nov 18, 2021 2:47 pm
by richmond62
Have a happy time . . .
-
SShot 2021-11-18 at 15.50.27.png

Re: How to draw a rectangle with only two rounded corners?

Posted: Thu Nov 18, 2021 2:57 pm
by bn
Hi Roland,

Maybe Ralf Bitters widget can help

https://github.com/revig/universal-button-widget

Download
https://github.com/revig/universal-butt ... .1.0.5.lce

and then use the "Extension Manager" from menu "Tools" to install the widget. It will show up in your "Tool" floating window. Drag it from there and use the Properties Inspector to set the top corners to rounded.

Kind regards
Bernd

Re: How to draw a rectangle with only two rounded corners?

Posted: Thu Nov 18, 2021 3:03 pm
by dunbarx
I do this all the time, building 1,2,3 and 4 rounded-corner-rectangles. But I have to do it by joining arcs onto straight lines, because, as you know, LC does not have those native shapes. In fact, the CAD programs I use do not either.

So just as in a CAD program, I would have to set the arcAngles and radii, and join them all as required. I use native tools to make that happen. In CAD, to use one method, objects snap to vertices. In LC, the several properties like "topLeft" or "right" can be used once the shapes are drawn, as in:

Code: Select all

set the topLeft of grc "myUpperRightArc" to the right of grc "myUpperStraightLine"
Craig

Re: How to draw a rectangle with only two rounded corners?

Posted: Thu Nov 18, 2021 3:46 pm
by richmond62
It is a pity that:

1. The rounded rectangle vectors provided in LC since version 8 cannot really have a zero rounded corner.

2. That each corner is not adjustable.

Re: How to draw a rectangle with only two rounded corners?

Posted: Thu Nov 18, 2021 4:02 pm
by Klaus
Use Ralf Bitters widget, as Bernd wrote earlier.
It does exactly what you need, e.g. "Each corner IS adjustable there" and more.

Re: How to draw a rectangle with only two rounded corners?

Posted: Thu Nov 18, 2021 4:17 pm
by richmond62
Use Ralf Bitters widget
Certainly a lot better than the 20 minutes I spent on importing an SVG. 8)

Re: How to draw a rectangle with only two rounded corners?

Posted: Thu Nov 18, 2021 5:40 pm
by golife
Oh, thanks a lot, Bernd, and all. I will check it out the widget.
Roland

Re: How to draw a rectangle with only two rounded corners?

Posted: Thu Nov 18, 2021 6:54 pm
by stam
There is a widget that will let you draw a rect and make any of the corners rounded independently of each other - but alas, i cannot for the life of me recall where i got it from. It works really well.
I attach the .zip file from my extensions folder (remember you need to import this via Tools menu -> extension manager).


golife wrote:
Thu Nov 18, 2021 1:54 pm
I have been struggling with trigonometric functions and looking up mathematical formulas for plotting to draw rectangles that have two upper rounded corners and two usual lower 90 degree corners.
I believe this will do exactly what you need it to Roland, just edit the top right/top left and it will do exactly what you've requested...

Hope this helps,
Stam
-- edited to include screen shot (and to hide my missing the link to Ralph's extension ;) - this isn't it i don't think).

Re: How to draw a rectangle with only two rounded corners?

Posted: Thu Nov 18, 2021 7:17 pm
by richmond62
I wrote:
It is a pity that:
Because a LiveCode vector and a widget are 2 different beasts, and a LiveCode vector (graphic object)
can have many more properties adjusted than those of a widget.

Re: How to draw a rectangle with only two rounded corners?

Posted: Thu Nov 18, 2021 8:06 pm
by stam
Further to my previous post, as i just zipped the the extension folder it may not work and it probably won't work if you try to 'import' via extensions manager. If that is the case, try just putting the folder in your 'extensions' folder (not the 'plugins' folder)

Looks like this was created by Andreas Strauch, but i can't find the source - if i do, i'll post it here...

S.

PS: absolutely no sign of this anywhere. I wonder if it's been actively 'disappeared' as it was a community project...

Re: How to draw a rectangle with only two rounded corners?

Posted: Thu Nov 18, 2021 8:29 pm
by FourthWorld
stam wrote:
Thu Nov 18, 2021 8:06 pm
PS: absolutely no sign of this anywhere. I wonder if it's been actively 'disappeared' as it was a community project...
That would depend on what you mean by "disappeared".

In the history of these forums I've seen only a small handful of non-spam posts deleted by the forum managers, most in two recent threads which had descended into forum members insulting each other, and both of which had several days of advance notice before deletion.

On the other hand, I've seen many forum members delete their own content here, sometimes with surprising thoroughness.

Did the file even originate here? Might it have been posted in any of the other more likely venues like GitHub or the author's website?

Re: How to draw a rectangle with only two rounded corners?

Posted: Thu Nov 18, 2021 8:41 pm
by stam
Sadly i have absolutely no recollection where i got this from.

Googling this led nowhere - even including the name of the author, which is embedded in the extension.
In fact google takes me to a page saying that some results may be hidden, as possibly the EU 'right to be forgotten' seems have been invoked.
Looking on LiveCodeShare, this author does have other stacks there but this doesn't show.

Trying various related searches only show a facebook post from this author with a youtube video demo'ing it in the LC devs facebook group, but i could not see a link to download it.
link: https://www.facebook.com/groups/liveco ... 987097973/

It's possible i'm missing something obvious but i cannot find the source anywhere - and it's such a useful extension!