Load image into a rounded rectangle

Audio and Graphics
#1

Hi buddy,

Is there any way to load an image inside a rounded rectangle? The newImageRect method seems only can load images into sharp-corner rectangle.

Jimmy

#2

Hi Jimmy,

The “newImageRect” API is probably a bit confusing in name to new users: it’s used to load dynamically-picked images (images picked for different device resolutions). It doesn’t have any direct relation to a “rectangle” with sharp corners.

If you want to load an image “inside” a rounded rectangle, you’ll need to use a bitmap mask (of a rounded rectangle) and mask the edges of the image so that it appears to be clipped inside the rounded rectangle.

Hope this helps,

Brent

#3

OIC.

May I have the example to learn how to “mask” the image?

Jimmy

#4

Hi Jimmy,

Here’s a brief tutorial on image masking.

http://www.coronalabs.com/blog/2012/05/29/how-to-use-bitmap-masks/

Just remember to note the very specific requirements with masking, most especially:

  1. the bitmap mask image dimensions must be divisible by 4 in both directions.

  2. the bitmap mask image must have a black border of at least 3 pixels all around.

  3. remember to use white for the “fully visible” parts… not transparency.

Hope this helps,

Brent

#5

Hi Jimmy,

The “newImageRect” API is probably a bit confusing in name to new users: it’s used to load dynamically-picked images (images picked for different device resolutions). It doesn’t have any direct relation to a “rectangle” with sharp corners.

If you want to load an image “inside” a rounded rectangle, you’ll need to use a bitmap mask (of a rounded rectangle) and mask the edges of the image so that it appears to be clipped inside the rounded rectangle.

Hope this helps,

Brent

#6

OIC.

May I have the example to learn how to “mask” the image?

Jimmy

#7

Hi Jimmy,

Here’s a brief tutorial on image masking.

http://www.coronalabs.com/blog/2012/05/29/how-to-use-bitmap-masks/

Just remember to note the very specific requirements with masking, most especially:

  1. the bitmap mask image dimensions must be divisible by 4 in both directions.

  2. the bitmap mask image must have a black border of at least 3 pixels all around.

  3. remember to use white for the “fully visible” parts… not transparency.

Hope this helps,

Brent