Rects with Some Corners Rounded

Got a LiveCode personal license? Are you a beginner, hobbyist or educator that's new to LiveCode? This forum is the place to go for help getting started. Welcome!

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller

Post Reply
dhurtt
Posts: 42
Joined: Sat Nov 09, 2013 7:37 pm

Rects with Some Corners Rounded

Post by dhurtt » Tue Nov 26, 2013 2:17 am

I noticed a graphic in a stack with the type of "Rounded Rectangle", yet some of the corners are round and some are square. Using check box toggles you can turn on or off whether the top or the bottom corners are curved. How is that done? I cannot find a property that allows you to set each corner of a graphic separately? (I cannot look at the code as the stack is locked.)

Regards,

Dale

dunbarx
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 10332
Joined: Wed May 06, 2009 2:28 pm

Re: Rects with Some Corners Rounded

Post by dunbarx » Tue Nov 26, 2013 2:27 am

I wonder if this was hand-made, with each corner managed separately. Certainly can be done. I do not think there is a way, as you said, to control the corners of a roundRect individually. I mean natively.

Craig Newman
Last edited by dunbarx on Tue Nov 26, 2013 2:56 am, edited 1 time in total.

Simon
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 3901
Joined: Sat Mar 24, 2007 2:54 am

Re: Rects with Some Corners Rounded

Post by Simon » Tue Nov 26, 2013 2:39 am

Hi Dale,
I've seen that stack before but don't remember where it is.
Could you post a link?

I think it was another square rectangle put on top of the rounded one.

Simon
I used to be a newbie but then I learned how to spell teh correctly and now I'm a noob!

dhurtt
Posts: 42
Joined: Sat Nov 09, 2013 7:37 pm

Re: Rects with Some Corners Rounded

Post by dhurtt » Tue Nov 26, 2013 2:49 am

The stack is MobGUI. Each "list item button" is a group. The graphic element is a rounded rectangle.

Laying one rect on another would not work as the border of the top graphic would show, indicating two, stacked graphics. Maybe three, stacked graphics where the top is a borderless rectangle. But MobGUI does not use those tricks. It is a single rounded rectangle graphic with two custom properties controlling the top and bottom curves. I assume that the property handlers are in the password protected stack. If it is drawing code, then it has to be there.

The problem is that MobGUI does not have nearly the number of controls necessary to develop a control-rich application. For example, if you wanted to use the list item buttons, but have a check instead of a ">" on the right it looks like you would need to roll your own. It also does not seem to support them with icons to the left. [sigh]

I am just trying to figure out how it was done so I can roll my own. MobGUI is a cool plugin, but the forum traffic indicates a lack of support.

dunbarx
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 10332
Joined: Wed May 06, 2009 2:28 pm

Re: Rects with Some Corners Rounded

Post by dunbarx » Tue Nov 26, 2013 3:05 am

If the "base" part of the super roundRect stays the same, that is, the straight lines, then the virtual intersection of the sides of that rectangle are fixed. If that is so, you can make a gadget that places a 90° arc section in a corner, and changes the radius as desired. This radius would run from a minimum of 0, forming a real corner, to a radius of half the width of the shortest side of the "base" rectangle. The lines need to extend or retract to mate with the arc section.

So the composite object would be four straight lines and four arcs. The thing that makes this not so tedious is that fixed virtual intersection. Of course a variably sized rect can be managed as well, just a bit more work.

If you do this, I think it would be great to publish it. Might be useful as a stock gizmo.

Craig Newman

Simon
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 3901
Joined: Sat Mar 24, 2007 2:54 am

Re: Rects with Some Corners Rounded

Post by Simon » Tue Nov 26, 2013 3:06 am

There was a good stack posted that did show rounding of just the top or bottom of a rectangle. Can't find it now.
At any rate by using two rects I've made a stack that shows the effect. The trick (I used) is the top rect has 3 lines drawn and no boarder.

Simon
Edited.
I used to be a newbie but then I learned how to spell teh correctly and now I'm a noob!

dunbarx
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 10332
Joined: Wed May 06, 2009 2:28 pm

Re: Rects with Some Corners Rounded

Post by dunbarx » Tue Nov 26, 2013 3:46 am

Hi.

Seemed like fun to fool around. I made two line graphics, one horizontal and one vertical, and an oval graphic with a start angle of 90° and an arc of 90°. So this arc is like the roundrect topleft corner. I named the horizontal line "V" and the vertical line "H". The oval is named "arc". I made a slider with values from 10 to 50 and put this into its script:

Code: Select all

on scrollbarDrag
   put the top of grc "V" into tTop
   put the left of grc "H" into tLeft
   put the thumbPosition of me into temp
   set the width of grc "arc" to temp
   set the height of grc "arc" to temp
   set the left of grc "arc" to tLeft 
   set the top of grc "arc" to tTop
   set the left of grc "V" to the right of grc "arc"  - the width of grc "arc" / 2
   set the top of grc "H" to the bottom of grc "arc" - the height of grc "arc" / 2
end scrollbarDrag
Works OK, may need fine tuning. I guess you could make four of these, or make some "handle" at the corners do the work.

Craig Newman

Simon
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 3901
Joined: Sat Mar 24, 2007 2:54 am

Re: Rects with Some Corners Rounded

Post by Simon » Tue Nov 26, 2013 3:50 am

Ok I found it:
http://forums.runrev.com/phpBB2/viewtop ... 94&#p69194
This guy set all the point of a grc poly.

Craig's way looks cooler.

Simon
I used to be a newbie but then I learned how to spell teh correctly and now I'm a noob!

dhurtt
Posts: 42
Joined: Sat Nov 09, 2013 7:37 pm

Re: Rects with Some Corners Rounded

Post by dhurtt » Tue Nov 26, 2013 3:41 pm

Thanks everyone for the advice. I am at the GUI prototyping stage, so I am trying not to get caught up in solving problems like this right now! :^) But when I get to that stage, this will help immensely.

Post Reply