Photo circular form

Hello,
How can I load a photo in a PDF page and shape it as a circle ? (like circleAvatar in flutter )
Thanks,

4 Replies 1 reply marked as answer

AP Anand Panchamoorthi Syncfusion Team January 7, 2021 09:08 AM UTC

Hi Mohamed Chaaben,

Thanks for contacting Syncfusion support.

We can draw circular shape images by adding clip to the PDF page graphics before drawing the image. It required to set the clip with path data, but currently we have only support rectangle data to set the clip in the graphics. So we have logged this as a usability feature to set clip using path data. We will implement this feature in our upcoming weekly release which will be expected on 12th January 2021.

You can track the feature status from https://www.syncfusion.com/feedback/21185/support-to-draw-circular-shape-image-in-pdf  

With Regards,
Anand Panchamoorthi


MC mohamed chaaben January 7, 2021 01:00 PM UTC

Thank you. 

Please keep me informed whenever you implement this feature.

Yours faithfully, 


AP Anand Panchamoorthi Syncfusion Team January 8, 2021 05:34 AM UTC

Hi Mohamed Chaaben,

Yes, we will inform once the support has been implemented.

With Regards,
Anand Panchamoorthi


AP Anand Panchamoorthi Syncfusion Team January 12, 2021 11:13 AM UTC

Hi Mohamed Chaaben, 

We have included the support to set clip with path data into the weekly release V18.4.34-beta. Now, We can able to draw circular shaped image by setting clip path on page graphics before drawing image. Please find the code snippet below, 
//Create a PdfDocument 
final PdfDocument document = PdfDocument(); 
 
//Add page to PdfDocument 
final PdfPage page = document.pages.add(); 
 
//Create image from file 
final File file = File('data/faceImage.png'); 
final PdfImage image = PdfBitmap(file.readAsBytesSync()); 
 
//Get page graphics 
final PdfGraphics pageGraphics = page.graphics; 
 
//Save Pdf graphics state 
final PdfGraphicsState state = pageGraphics.save(); 
 
//Create PdfPath and clip the rectangle bounds in page graphics 
final PdfPath path = PdfPath(); 
path.addEllipse(Rect.fromLTWH(150, 50, 200, 200)); 
pageGraphics.setClip(path: path); 
 
//Draw the image in page rectangle clip bounds 
pageGraphics.drawImage(image, const Rect.fromLTWH(150, 50, 200, 200)); 
 
//Restore the graphics state 
pageGraphics.restore(state); 
 
//Save PDF document 
final List<int> bytes = document.save(); 

Please let us know if you need any further assistance in this. 

With Regards, 
Anand Panchamoorthi 


Marked as answer
Loader.
Up arrow icon