How to draw a rectangle with only two rounded corners?

[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)

[richmond62]

Presumably you could make a vector image in Inkscape, export it as an SVG and then bring
it into a LiveCode stack?

[richmond62]

I drew a picture in GIMP:
-

arch.png (8.28 KiB) Viewed 7018 times

-
Imported it into Inkscape and traced the bitmap to end up with a vector:
-

-
and then used my own SVG importer stack to turn it into an SVG widget in LiveCode:
-

[richmond62]

Have a happy time . . .
-

[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

[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

[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.

[Klaus]

Use Ralf Bitters widget, as Bernd wrote earlier.
It does exactly what you need, e.g. "Each corner IS adjustable there" and more.

[richmond62]

Use Ralf Bitters widget

Certainly a lot better than the 20 minutes I spent on importing an SVG.

[golife]

Oh, thanks a lot, Bernd, and all. I will check it out the widget.
Roland

[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).

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).

[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.

[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...

[FourthWorld]

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?

[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!