Rounded corner image

General
1

Hi
Is there an easy way to create rounded corners on an image / picture ?
Simular to roundedRectangle control but the image may not exceed the rounded rectangle size.

Tnx !

2

What platform?

3

Hi Tim
Both but main focus on OSX platform.

4

Oh I was more interested in Desktop / Web because it can be done simply with CSS on Web.
On Desktop you might be able to create a roundrect mask and apply the mask to the image you want to round off.

5

Not simply, but there’s two methods.

#1 Do what Tim says and create a rounded rectangle image and attach it to the main image as a mask.
#2 macOS only; use some Core Graphics declares when drawing the image to a canvas, which will ‘clip’ the graphics area on a path.

I personally use route #2 the most, but that’s because currently most of my apps are macOS only.

6

Hi, tnx for the suggestions ! :slight_smile:

7

Maybe a stupid question, but are there no “commercional” modules / plugins available for this ?

Read image from file/db, call function round (x) … function generate new image in memory that does the part …

8

This hasn’t been tested, but it should work

Public Function roundedPicture(image as picture,radius as integer) as picture
  Dim mask As picture(image.Width,image.Height)
  Dim g As Graphics=mask.Graphics
  g.ForeColor=&cffffff
  g.fillrect 0,0,g.Width,g.Height
  g.ForeColor=&c000000
  g.FillRoundRect 0,0,g.Width,g.Height,radius,radius
  image.applyMask(mask)
  Return image
  
End Function
9

You just forgot mask as NEW picture :

[code]Public Function roundedPicture(image as picture,radius as integer) as picture

Dim mask As new picture(image.Width, image.Height)
Dim g As Graphics = mask.Graphics
g.ForeColor = &cffffff
g.fillrect(0,0,g.Width,g.Height)
g.ForeColor = &c000000
g.FillRoundRect(0,0,g.Width,g.Height,radius,radius)
image.applyMask(mask)
Return image

End Function
[/code]

Also, an image dragged into the project with a 2016 version will not work. image has to be mutable. It is not very difficult to adapt by copying image into a new picture.

10

Hi Tnx for the information !
I was already using the “New Picture” function.

I got error on : image.applyMask(mask)
Message : “This application has encountered an Problem…”

Flow :

  • click on Link, application loads the image and pass it to the function above “roundedPicture”

Any idea’s ?

11

[quote=303710:@Peter Verburgh]Hi Tnx for the information !
I was already using the “New Picture” function.

I got error on : image.applyMask(mask)
Message : “This application has encountered an Problem…”

Flow :

  • click on Link, application loads the image and pass it to the function above “roundedPicture”

Any idea’s ?[/quote]

What is the code you are using to load the image ?

12

Hi

Normally in working example I use the “pic” variable.
Now I have put the function into a module…

Source code :

			Try
					ImgCustomer.Image = Customer48px
					Dim p As New DL_Picture 
					Dim pic As Picture 
					pic =  p.SelectCustomerPicture (CurrentCustomer.ID)
					if (pic <> Nil) Then
							Dim picRounded As Picture = UtilsGraphic.RoundPicture (pic, 25)
							ImgCustomer.Image =picRounded
					End If
			Catch Err
					UtilsLogger.LogIt str (Err.ErrorNumber) + "  "  + Err.Message
			End
			ImgCustomer.Invalidate (false)

RoundPicture function contains :

	Dim mask As Picture = New Picture (image.Width,image.Height)
	 Dim g As Graphics=mask.Graphics
	g.ForeColor=&cffffff
	g.fillrect 0,0,g.Width,g.Height
	g.ForeColor=&c000000
	g.FillRoundRect 0,0,g.Width,g.Height,radius,radius
	image.applyMask(mask)
	Return image
13

So, SelectCustomerPicture loads it from disk ?

14

Hi Michel, tnx for the quick answer!
No I load the image from SQLite database.

The image I save into the database into a string (encodebas64)
The SelectCustomer function loads the string and converts it back to Picture

If I don’t use the newest RoundFunction (just load the string to image from the db) everything works well.

15

Michel, I’ve just tried with an image from the resources and I have the same problem… so I don’t think its related to db vs picture conversion…

16

You may want to try something like :

[code]Public Function roundedPicture(pic as picture,radius as integer) as picture

Dim image as new picture(pic.width, pic.height)
Image.graphics.Drawpicture(pic, 0, 0)
Dim mask As new picture(image.Width, image.Height)
Dim g As Graphics = mask.Graphics
g.ForeColor = &cffffff
g.fillrect(0,0,g.Width,g.Height)
g.ForeColor = &c000000
g.FillRoundRect(0,0,g.Width,g.Height,radius,radius)
image.applyMask(mask)
Return image

End Function[/code]

This will avoid the problem of immutable pictures.

1 Like
17

Thanks Michel ! This solves my problem :slight_smile: Very good support !!