Rounding and Image

Visuals, audio, animation. Blended, not stirred. If LiveCode is part of your rich media production toolbox, this is the forum for you.

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller

Post Reply
KennyR
Posts: 256
Joined: Thu Jan 19, 2012 4:25 am

Rounding and Image

Post by KennyR » Wed Mar 13, 2013 12:34 am

I hate to ask this question on multiple threads but I think this question is best suited for here....Question...After I create a template image and import a photo from lets say a mobile gallery, is there a way to make the image have rounded corners? After importing the image, it's original shape (that of a rectangle or square) looks generic and I would like to have it rounded in order to give it a more smooth look. I have been all over the forum and on the web looking for answers and have no clue on how to go about this....thanks ahead of time for the help...Kenny

Simon
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 3901
Joined: Sat Mar 24, 2007 2:54 am

Re: Rounding and Image

Post by Simon » Wed Mar 13, 2013 12:42 am

Hi Kenny,
I'm not sure what the iPhone image looks like, but if you just what rounded corners:
I think they call it a mask. It would be an image that is placed on top of your image, the middle would be transparent.
If you don't have photoshop or gimp or don't know how to make one, just give me the dimensions of you image (possibly background color) and I'll post something.

Simon
I used to be a newbie but then I learned how to spell teh correctly and now I'm a noob!

sturgis
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 1685
Joined: Sat Feb 28, 2009 11:49 pm

Re: Rounding and Image

Post by sturgis » Wed Mar 13, 2013 1:39 am

If you need your mask to be scalable you can most likely do it in parts.

1 part for each corner, 2 lines vertical, 2 lines horizontal then do proportional scaling based on the image size.

bn
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 4171
Joined: Sun Jan 07, 2007 9:12 pm

Re: Rounding and Image

Post by bn » Wed Mar 13, 2013 1:53 am

Hi Kenny,

if I understand you correctly you can get the effect in Livecode.

Make a graphic of type rounded rectangle. Make it opaque. Set the borderwidth to 2, set the radius to 20.
Set the bordercolor to gray.
Now set the backgroundPattern of the graphic to the short id of the image. Just the number, without "id"
You can either adjust the graphic to the dimensions of the image or scale the image to the dimensions of the graphic.

Here is a little stack that shows that.
graphic as mask.livecode.zip
(4.34 KiB) Downloaded 480 times
Kind regards
Bernd

sturgis
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 1685
Joined: Sat Feb 28, 2009 11:49 pm

Re: Rounding and Image

Post by sturgis » Wed Mar 13, 2013 2:12 am

Ok, thats just cool. I learn new things every day it seems!

KennyR
Posts: 256
Joined: Thu Jan 19, 2012 4:25 am

Re: Rounding and Image

Post by KennyR » Wed Mar 13, 2013 8:43 pm

Thank you to everyone who helped me out! This problem has been bothering me for the past few days...I'm off to give this a shot...

Post Reply