Best practice for creating a resizable HUD-style widget stack background?

[Scott Rossi]

Recently, Keith Clarke wrote:

> What is the best way to go about creating a resizable HUD-style widget stack -
> like in this lesson on skinning but with a resizable rounded-corner
> rectangular background
> http://www.runrev.com/developers/lessons-and-tutorials/tutorials/intermediate-
> skinning/ ?

For a resizable custom window, you must create a mask image for every
size/orientation of window that you'll need.  But a window that a user can
drag-to-resize is out of the question because you'd have to generate a mask
image each step of the way during the drag and redraw the window repeatedly.

That said, if your window can "jump" to the required sizes (ie pressing the
maximize or minimize control of a standard window) or if you have a limited
range of preconfigured size options, you can store a range of mask images in
your app, or generate them on the fly as needed.  The former is easier, but
the latter can be done by storing a representation of your windowshape as a
set of graphic objects in a group, resize/reposition the objects as
required, create a snapshot image of the group to serve as a mask for the
window.

For round-rect windows, you need create the mask as nine separate objects,
scaling top/sides appropriately, and generating the mask from that.  I've
done it, and as I mentioned, it works best when you have fixed sizes you
expand or collapse to, not with a drag-to-resize behavior.

Regards,

Scott Rossi
Creative Director
Tactile Media, UX Design