[Home] [Downloads] [Search] [Help/forum]


Register forum user name Search FAQ

Gammon Forum

[Folder]  Entire forum
-> [Folder]  MUSHclient
. -> [Folder]  Miniwindows
. . -> [Subject]  Fill a rounded rectangle with a gradient.

Fill a rounded rectangle with a gradient.

It is now over 60 days since the last post. This thread is closed.     [Refresh] Refresh page


Posted by Isuka   (9 posts)  [Biography] bio
Date Wed 11 Mar 2009 06:00 PM (UTC)
Message
I'm writing myself a placard for character vitals (basically what you see in every console RPG) and using a gradient to fade the bar color from, say green to red, would be awesome.

I've managed to do this by drawing a gradient, then overlaying the gradient with a rectangle the same color as the background image to block out part of that gradient from right to left. It looks ok that way, but it's left me with two restrictions:
first, I'd like to switch from a solid color background to a background image, which would kill my idea of blocking out the gradient with background color.
Second, I'd like to use a rounded rectangle rather than a standard rectangle, to give the bars more of a sleek appearance. I tried using a no-fill rounded rectangle, but of course this just leaves the corners of the gradient showing outside of that frame... so I'm kind of stumped.

Thus, is it possible to use a gradient as a fill color? How could I rig this up to work, if not?
[Go to top] top

Posted by WillFa   USA  (525 posts)  [Biography] bio
Date Reply #1 on Wed 11 Mar 2009 07:52 PM (UTC)
Message
I can think of how you can rig it with WindowImage and WindowBlendImage...

Create a Winiwinow with a black background and draw a round rect the size of your bar in it with a white fill. Use WindowImageFromWindow on that window. you now have a stamp/cooke cutter of the final shape.

create another miniwindow of the same size and use WindowGradient to fill it entirely.

Use WindowBlendImage with the AND mode blending to mask the 2nd window into the shape of the first window.

Use WindowImageFromWindow again to make a bitmap of your final bar shape.

Use WindowBlendImage with the Or mode to put that graphic into your Placard window. It makes black the transparent color... there are different hoops to jump thru is you wanted a different mask/transparency color than black.

[Go to top] top

Posted by Nick Gammon   Australia  (22,973 posts)  [Biography] bio   Forum Administrator
Date Reply #2 on Wed 11 Mar 2009 08:13 PM (UTC)

Amended on Wed 11 Mar 2009 10:39 PM (UTC) by Nick Gammon

Message

You can do it with a mask. As a demo, make a main window:

    
    -- main result window
    win = GetPluginID ()  
    WindowCreate (win, 0, 0, 300, 200, 7, 0, ColourNameToRGB("silver"))  -- create window
    WindowShow (win,  true)  -- show it 
    

Now draw whatever gradient (or background image) you want into a second window:

    
    -- gradient window
    win2 = GetPluginID ()  .. ".2"
    WindowCreate (win2, 0, 0, 200, 80, 7, 0, ColourNameToRGB("white"))  -- create window
    WindowShow (win2,  true)  -- show it  (for testing purposes only)
    
    WindowGradient (win2, 0, 0, 0, 0, 
                    ColourNameToRGB ("red"), 
                    ColourNameToRGB ("yellow"), 
                    1)  -- left to right
    
    

Now make a mask in a third window:

    
    -- mask window
    win3 = GetPluginID ()  .. ".3"
    WindowCreate (win3, 0, 0, 200, 80, 7, 0, ColourNameToRGB("black"))  -- create window
    WindowShow (win3,  true)  -- show it (for testing purposes only)
    
    -- round rectangle
    WindowCircleOp (win3, 3, 20, 20, 180, 60, 
                    ColourNameToRGB("black"), 5, 0,  -- no pen
                    ColourNameToRGB("white"), 0,  -- brush
                    25, 25)
    

Convert both temporary windows into images, and merge them into the main window:

    
    -- convert to images
    WindowImageFromWindow (win, "gradient", win2)
    WindowImageFromWindow (win, "mask", win3)
    
    -- do the merge
    WindowMergeImageAlpha (win, "gradient", "mask", 20, 20, 200, 100, 0, 1, 0, 0, 0, 0)
    

Normally you wouldn't show win2 and win3, I have just done that so you can see what is happening under the hood. By tweaking coordinates, colours etc., you can have pretty-much any effect you want.


- Nick Gammon

www.gammon.com.au, www.mushclient.com
[Go to top] top

Posted by Nick Gammon   Australia  (22,973 posts)  [Biography] bio   Forum Administrator
Date Reply #3 on Wed 11 Mar 2009 08:19 PM (UTC)
Message

One effect you can experiment with is blurring the mask. To do that add this line after creating the round rectangle:

    
    WindowFilter (win3, 0, 0, 0, 0, 3, 0) -- blur both directions
    

This gives this mask:

Now the resulting image looks like this, which you may or may not like:


- Nick Gammon

www.gammon.com.au, www.mushclient.com
[Go to top] top

Posted by Nick Gammon   Australia  (22,973 posts)  [Biography] bio   Forum Administrator
Date Reply #4 on Wed 11 Mar 2009 08:23 PM (UTC)
Message
Of course you can use a similar effect to merge in a background image into a round rectangle (or indeed, any shape).

- Nick Gammon

www.gammon.com.au, www.mushclient.com
[Go to top] top

The dates and times for posts above are shown in Universal Co-ordinated Time (UTC).

To show them in your local time you can join the forum, and then set the 'time correction' field in your profile to the number of hours difference between your location and UTC time.


16,468 views.

It is now over 60 days since the last post. This thread is closed.     [Refresh] Refresh page

Go to topic:           Search the forum


[Go to top] top

Quick links: MUSHclient. MUSHclient help. Forum shortcuts. Posting templates. Lua modules. Lua documentation.

Information and images on this site are licensed under the Creative Commons Attribution 3.0 Australia License unless stated otherwise.

[Home]


Written by Nick Gammon - 5K   profile for Nick Gammon on Stack Exchange, a network of free, community-driven Q&A sites   Marriage equality

Comments to: Gammon Software support
[RH click to get RSS URL] Forum RSS feed ( https://gammon.com.au/rss/forum.xml )

[Best viewed with any browser - 2K]    [Hosted at HostDash]