how to draw a button with drawsubimagerect

BlitzMax Forums/BlitzMax Beginners Area/how to draw a button with drawsubimagerect

johnnyfreak(Posted 2010) [#1]
i want to draw a button on the screen. I came up with two ideas but i don't know which one is the best or if are there others way to do this.

My first idea was to have 5 images (corners, borders and "filling") for the button.

the other idea is to have a single image of about 20x20 pixels.

type myButton
   field x:int, y:int
   field text:string
   global image:TImage
  

   [...]

  method draw()

    'drawsubimage  top-left corner
    'draw top-right corner
    'draw bottom-right corner
    'draw bottom-left corner

    'repeat drawing bordertop subimage for the entire lenght
    'repeat drawing borderbottom subimage for the entire lenght
    'repeat drawing borderleft subimage for the entire height
    'repeat drawing borderright subimage for the entire height

    'draw filling        <-------------- How to draw this?
    
    'draw text 

  endmethod
endtype


using 5 images i can use setvieport and tileimage to fill the rectangular area.

are there any other methods to draw a button?
Is this method slow?


Arowx(Posted 2010) [#2]
Well in theory it is slower than a single draw command, as you are drawing 5 images, but you have the flexibility of drawing buttons of different sizes.

It depends on how often you need buttons of varying size?

Your more likely to need this type of drawing method to for graphical user interface elements, like windows or panels that can vary in size or if you are going to provide a multi-language version.


degac(Posted 2010) [#3]
You could use 5 different images to make your buttons in different shapes and dimensions, then copy them in a new image and use these one during the normal operations.
A sort of caching and so the speed should be higher, but with some memory occupation.


johnnyfreak(Posted 2010) [#4]
i'm developing a simple (not too simple) GUI for my next game(s).
Currently i have event handling, coordinate system, z-ordering, and almost all the feature for the core of a gui.

Now i'm going to code basic controls such as Buttons, textboxes, windows, etc...

i want to make the gui skinnable.

I don't know how to draw efficiently windows borders and buttons as i don't know previously their size (e.g. depending on button labels)

I hope i've explained better my problem.

i'm sorry if i make mistakes writing in english