Why is drawing to slick.Image.getGraphics() that slow?

Question

Im making a game using Java and the Slick2D library. I have a button class with a render method that looks something like this:

public void render(Graphics g, int xOffset, int yOffset){
    int renderX = x+xOffset;
    int renderY = y+yOffset;

    if(hasFocus()){
        g.setColor(HIGHLIGHTEDBUTTONCOLOR);
    }else{
        g.setColor(BUTTONCOLOR);
    }
    g.fillRect(renderX, renderY, width, height);

    g.setColor(BUTTONTEXTCOLOR);
    g.drawString(text, renderX+(width/2) - (g.getFont().getWidth(text)/2), renderY+(height/2) - (g.getFont().getLineHeight()/2));    
}

This works great until I need to render only part of a button when the other part is outside the bounds of my scrollable container. I tried this:

Image temp = new Image(myButton.getWidth(), myButton.getHeight());
myButton.render(temp.getGraphics(),this.x, this.y);
temp.getSubImage(0, 0, int temp.getWidth(), temp.getHeight()/2);
myGraphics.drawImage(temp, myButton.getX(), myButton.getY());

But this dropped my fps from 4000 to 10.

I tried making a blank image before hand and just copying it to draw to at render time but this didnt help. I tried pre-rendering the image and it ran at 4000 fps again but whenever i changed the buttons text or whether or not it was highlighted I had to redraw the image which caused a freeze up.

How can I render only part of this button every frame without it being too slow. also remember the portion of the button I need to render changes and if im scrolling it may change every frame.

Answer 1

the solution is to set a world clip(area that can be rendered to) for the graphics of the game container.

g.setWorldClip(this.getX()+xOffset, this.getY()+yOffset, this.getWidth(), this.getHeight());

and then clear it after rendering the component

g.clearWorldClip();