Screen tap to coordinates with respect to PDF page

Hi Syncfusion Team, 

I'm trying to implement a custom pin/annotation feature on top of SfPdfViewer where users can add pins to specific locations on PDF pages. This flutter application will need to work on iOS/Android/Web platforms.

While I've successfully implemented the basic pin placement, I'm facing a challenge with maintaining pin positions when users interact with the PDF (zoom, pan, scroll). Currently, I'm testing on mobile, but the solution needs to work on web as well.

I should mention that I'm not a professional developer, so I would greatly appreciate detailed guidance.

Current Implementation:

  • I'm using SfPdfViewer.asset in single-page mode
  • I have a Stack with SfPdfViewer and a custom PinOverlay
  • Pins are intended to be stored with normalized coordinates (0-1) relative to the page dimensions
  • Pins are rendered using Positioned widgets in the overlay

Current Issue: 

When users zoom, pan, or scroll the PDF, the pins in the overlay remain stationary instead of moving with their corresponding positions on the PDF page. I need the pins to transform (scale, translate) in sync with the PDF content. This synchronization needs to work consistently across all platforms (mobile and web).

I found a similar question in your forum:

https://www.syncfusion.com/forums/181702/translating-screen-coordinates-into-pdf-coordinates 

However, I wasn't able to make much progress implementing the solution described there. I would greatly appreciate a more detailed explanation or alternative approach for my specific case.

Specific Questions:

  1. Does SfPdfViewer expose any viewport or transformation information I can use to sync the pin overlay?
  2. Is there a recommended approach for implementing custom overlays that stay in sync with the PDF content?
  3. Are there any specific events or controller methods I should listen to/use for tracking PDF transformations?
  4. Are there any platform-specific considerations I should be aware of when implementing this feature for both mobile and web?

I was not able to upload the code files, so I've linked my git repo for reference - Github reference code

Any guidance would be extremely helpful.

Thank you for your help!


1 Reply

IK Imman Kumar P Syncfusion Team February 10, 2025 12:29 PM UTC

Hi Burhan Hassan,

 

We have checked your sample, and the requirement of adding custom markers to the PDF page can be achieved through the support of custom image annotations. In this case, adding, moving, deleting, and saving the markers will be handled by the SfPdfViewer itself.

 

Alternatively, this can be achieved at the application level with the support of coordinate conversion, where the user is responsible for handling the addition, movement, and deletion of markers. This feature provides functionality to convert PDF coordinates to client coordinates and scroll coordinates, and vice versa.

 

However, both of these features are not yet supported by the SfPdfViewer widget, and we do not have any immediate plans to implement them. During the planning stage of each release cycle, we review all open feature requests and prioritize implementation based on various factors, including product vision, technological feasibility, and customer interest. We will notify you when this feature is implemented.

 

Please find the feedback link below,
https://www.syncfusion.com/feedback/33543/support-for-custom-stamp-annotation

 

Regards,

Imman Kumar P


Loader.
Up arrow icon