How to make a square topped, round rect bottomed graphic?

David Bovill david at vaudevillecourt.tv
Thu Dec 2 06:40:00 EST 2010


Thanks Jan - intrigued, got mine working using the scrolling technique.
Can't do individual corners that are rounded only individual corners that
are square at the moment - I'll take a look at your technique and borrow the
best bits :)

NB - I'll demo this on the weekend together with other Datagrid like groups
that I've collected or created. Would be great to have your input!

On 2 December 2010 09:35, Jan Schenkel <janschenkel at yahoo.com> wrote:

> --- On Wed, 12/1/10, David Bovill <david at vaudevillecourt.tv> wrote:
> > ? I'm just starting on doing this -
> > but it seems to me that you need to
> > scroll one of the groups. Maybe that's because I am
> > creating it so the
> > rounded corners can be at the to top or bottom. So clipping
> > the square rect
> > to half way, moving it down, and scrolling it down would
> > show only the
> > bottom half. - which means that effectively the graphic has
> > the same rect
> > but the group windows are different? This means that the
> > gradients can be
> > made identical.... wip...
> >
>
> You don't have to worry about scrolling with lockLocation set on the inner
> groups. Here's a quick code recipe that you can put into a "Create" button:
>
> ##
> constant kRectangle = "50,50,250,100"
> constant kNoMargins = "0,0,0,0"
>
> on mouseUp
>   --> load some essentials into local variables
>   local tRectangle, tHeight
>   put kRectangle into tRectangle
>   put (item 4 of tRectangle) - (item 2 of tRectangle) \
>          into tHeight
>   --> load the fillGradient array
>   local tFillGradientA
>   put "linear" into tFillGradientA["type"]
>   put (item 1 of tRectangle),(item 2 of tRectangle) \
>          into tFillGradientA["from"]
>   put (item 3 of tRectangle),(item 2 of tRectangle) \
>          into tFillGradientA["to"]
>   put (item 1 of tRectangle),(item 4 of tRectangle) \
>          into tFillGradientA["via"]
>   put "0.00000,192,192,192" & return & \
>          "1.00000,128,128,128" \
>          into tFillGradientA["ramp"]
>   --> prepare by resetting the templateControls
>   reset the templateGroup
>   reset the templateGraphic
>   --> start by creating the outer group
>   local tOuterGroup
>   set the rectangle of the templateGroup to tRectangle
>   set the margins of the templateGroup to kNoMargins
>   create group "MyCustomControl"
>   put it into tOuterGroup
>   --> create the roundrect inner group
>   local tRoundRectGroup
>   put (item 2 of tRectangle) + (tHeight div 2) \
>          into item 4 of tRectangle
>   set the rectangle of the templateGroup to tRectangle
>   set the lockLocation of the templateGroup to true
>   create group "RoundRectClipGroup" in tOuterGroup
>   put it into tRoundRectGroup
>   --> create the roundrect in the top inner group
>   put kRectangle into tRectangle
>   set the style of the templateGraphic to "RoundRect"
>   set the rectangle of the templateGraphic to tRectangle
>   set the opaque of the templateGraphic to true
>   set the antiAliased of the templateGraphic to true
>   set the fillGradient of the templateGraphic to tFillGradientA
>   create graphic "RoundRectGraphic" in tRoundRectGroup
>   --> create the rectangle inner group
>   local tRectangleGroup
>   put (item 4 of tRectangle) - (tHeight div 2) \
>          into item 2 of tRectangle
>   set the rectangle of the templateGroup to tRectangle
>   set the lockLocation of the templateGroup to true
>   create group "RectangleClipGroup" in tOuterGroup
>   put it into tRectangleGroup
>   --> create the rectangle in the bottom inner group
>   put kRectangle into tRectangle
>   set the style of the templateGraphic to "Rectangle"
>   set the rectangle of the templateGraphic to tRectangle
>   set the opaque of the templateGraphic to true
>   set the antiAliased of the templateGraphic to true
>   set the fillGradient of the templateGraphic to tFillGradientA
>   create graphic "RectangleGraphic" in tRectangleGroup
>   --> cleanup by resetting the templateControls
>   reset the templateGroup
>   reset the templateGraphic
> end mouseUp
> ##
>
> When you click the "Create" button, it creates all required controls
> dynamically. Just for kicks, I automatically applied a fill gradient to this
> example. Expand with graphic effects at your own leisure :-)
>
> Write a behavior script that handles resizeControl and getProp/setProp
> handler pairs for easier scripting (e.g. to switch top and bottom, or from
> horizontal to vertical); then set the behavior of the outer group to the
> long id of that behaviour button.
>
> Groups and behaviors are a fantastic combination for creating custom
> controls by composition. As Trevor has abundantly demonstrated with the
> DataGrid :-)
>
> Enjoy!
>
> Jan Schenkel.
> =====
> Quartam Reports & PDF Library for LiveCode
> www.quartam.com
>
> =====
> "As we grow older, we grow both wiser and more foolish at the same time."
>  (La Rochefoucauld)
>
>
>
>
>
> _______________________________________________
> use-livecode mailing list
> use-livecode at lists.runrev.com
> Please visit this url to subscribe, unsubscribe and manage your
> subscription preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode
>



More information about the use-livecode mailing list