This site requires JavaScript, please enable it in your browser!
Greenfoot back
Twitter Twitter.hover
Gui
Gui wrote ...

2018/7/19

How to draw a rounded rectangle (for popup message)

Gui Gui

2018/7/19

#
Hello, I'm writting a Popup class, which as the name suggests, will display various popup messages for the user. So far I've got this constructor working, but it's just a standard rectangle with sharp edges.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
public Popup(String text)
{
    int fontSize = 35;
    Color fontColor = new Color(32, 51, 76);
    Color fontBgColor = new Color(0, 0, 0, 0);
    Color bgColor = new Color(255, 255, 255, 100);
 
    GreenfootImage txtImg = new GreenfootImage(text, fontSize, fontColor, fontBgColor);
    GreenfootImage img = new GreenfootImage(txtImg.getWidth()+40, txtImg.getHeight()+40);
 
    img.setColor(bgColor);
    img.fill();
    img.drawImage(txtImg, (img.getWidth() - txtImg.getWidth())/2, (img.getHeight() - txtImg.getHeight())/2);
    setImage(img);
}
I'm trying to figure out how to round the edges so I end up with a rounded rectangle. Could someone show me how to do that in Greenfoot? I'm also open to the idea of using 2D classes such as RoundRectangle2D etc., although I'm unfamiliar with it and don't know if Greenfoot will support it. Thanks a lot!
Super_Hippo Super_Hippo

2018/7/19

#
Try to use fillRect and fillOval to create those rounded corners (or edges).
Gui Gui

2018/7/20

#
Thanks. I tried using fillRect and fillOval and so far this is what I came up with.
?
1
2
3
img.fillOval(0,10, 20, img.getHeight()-10);
        img.fillOval(img.getWidth()-15,10, 20, img.getHeight()-10);
        img.fillRect(10,10, img.getWidth(), img.getHeight());
The thing is, the right oval is out of the image, therefore it doesn't "round" the rectangle. Any ideas ?
Super_Hippo Super_Hippo

2018/7/20

#
Change the '15' in line 2 to '20'. Add a '-20' after 'img.getWidth()' in line 3.
Gui Gui

2018/7/20

#
Ok I've tried different values and I quite like the way it looks. It's not perfect but it'll do. image Here's how I did it.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
public Popup(String text)
{
    int fontSize = 35;
    Color fontColor = new Color(233, 255, 221);
    Color fontBgColor = new Color(0, 0, 0, 0);
    Color bgColor = new Color(136, 206, 95);
 
    GreenfootImage txtImg = new GreenfootImage(text, fontSize, fontColor, fontBgColor);
    GreenfootImage img = new GreenfootImage(txtImg.getWidth()+80, txtImg.getHeight()+40);
 
    img.setColor(bgColor);
    img.fillOval(-6, 10, 45, img.getHeight()-10);
    img.fillOval(img.getWidth()-39, 10, 45, img.getHeight()-10);
    img.fillRect(10, 10, img.getWidth()-20, img.getHeight());
    img.drawImage(txtImg, (img.getWidth() - txtImg.getWidth())/2, (img.getHeight() - txtImg.getHeight())/2);
    setImage(img);
}
Thanks Hippo.
Gui Gui

2018/7/20

#
I'm trying to change the font with 'txtImg.setFont(new Font(fontName, fontSize))', but it doesn't change it. I was able to change the font before but I was using drawString, not drawImage, so maybe this is why.
Super_Hippo Super_Hippo

2018/7/20

#
If you draw a string on an image using the GreenfootImage constructor, it will use the default font. (You can't change the font before the image is created).
You need to login to post a reply.