We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
I would like to integrate Syncfusion's PDF viewer into my Flutter tablet application and let users draw paths and other shapes into the PDF with the pencil. Is there a way to translate screen coordinates into PDF coordinates to be able to do this?
Hi Sébastien Arbogast,
Please find the example application from the attachment for retrieving the tapped coordinates relative to the PDF page. Please find the workflow of this example application below,
We have used the TapGestureRecoginzer to catch the tap action and onTapDown callback. we have _getPdfCoordinates() method, it has the logic to return the tapped location coordinates relative to the PDF page.
Regards,
Deepika R
Thanks a lot Deepika. That was really helpful.
Now I am trying to use a slightly modified version of this code to try and draw a blue square in the PDF, whose upper-left corner is where I'm clicking.
The rectangle shape is drawn, but not where I'm clicking, and I get an internal exception in PdfDictionary which I can't quite understand.
I have uploaded my code here: https://github.com/sarbogast/pdf_annotation_poc
Can you please help me figure out what is wrong with my code?
Hi Sébastien Arbogast,
Regarding adding rectangle in tapped position:
I have fixed the in your sample [along with the output screen record of the same] and it can be downloaded from the attachment.
Regarding PdfDictionary exception:
We are able to reproduce the reported issue with the provided details, we are analyzing on this and will update the details on 17 April 2023
Regards,
Deepika R
Hi Sébastien Arbogast,
Please find the modified sample from attachment and let us know whether the issue is resolved at your end.
Regards,
Deepika R
Hello Deepika,
The only difference I see between your code and mine is that you added those 3 lines to the `SfPdfViewer.memory` constructor:
enableTextSelection: false,
enableDocumentLinkAnnotation: false,
enableHyperlinkNavigation: false,
Could you please clarify how those are connected to the exception I got in PdfDictionary? This would help me figure out why I can't enable text selection, document link annotations and/or hyperlink navigation.
Hi Sébastien Arbogast,
The reported issue is a known problem in SfPDFViewer. We hope that you are looking for a sample to retrieve PDF coordinates, so we have resolved the issue at the sample level to meet your requirements. We will fix the issue at a later time.
Regards,
Deepika R
Dear Support Team,
I have been struggling with the coordinate transformation for the past few days, and I would greatly appreciate your assistance.
I am working on a Flutter application where I have a Stack containing a CustomPainter and your PDFViewer. I use the CustomPainter to draw a rectangle with the mouse, and then I extract the coordinates of the rectangle to draw an annotation on the PDF document.
The X-axis alignment is not an issue since both widgets are centered horizontally. However, I am facing difficulties with the Y-axis due to scrolling. The scrolling affects the positioning of the annotation, and I would like to find a solution for this.
I was wondering if you could provide me with a simple example or guidance on how to handle this situation. If needed, I can share my current source code with you for further analysis.
Thank you in advance for your invaluable support. I appreciate your assistance.
Best regards,
Zied
Hi info startmicro,
Regarding text markup annotation:
We have a workaround for adding text markup annotation in SfPdfViewer. Kindly refer the following KB link,
Regarding drawn the rectangle in the tapped location:
We have prepared the workaround for drawn the rectangle in SfpdfViwer (along with the output screen record of the same) and it can be downloaded from the attachment. Please find the workflow of this example application below,
Please try this and let us know if this meets your requirement.
Regards,
Deepika R
Hi Deepika,
thank you for your response. Unfortunately, your solution is still not working correctly. I have now implemented your _getPdfCoordinates method. There is still a misalignment between the CustomPainter and the PDF annotation on the document. I also noticed that the calculation for the page number with:
does not work properly when the heights of the pages in the PDF file are different.
My main issue remains the calculation of the Y-axis offset. Could you please review my code and provide some suggestions on how to solve this problem?"
best regards,
Zied
We are checking the reported issue in your sample and will provide more details on July 17, 2023.
We have resolved the issue in the shared sample where annotations were not properly added on the corresponding page. We have attached the modified sample along with the output screen recording, which can be downloaded from the attachment. However, in the shared sample, the Gesture Detector and CustomPainterCanvas were used. In SfPdfViewer, we also used a gesture detector, due to the gesture conflicts in the sample, you may experience issues with scrolling operations. We have a plan to implement annotation support in SfPdfViewer. Kindly use the link below to track the status of this feature, https://www.syncfusion.com/feedback/26332/support-for-shape-annotations
At present we do not have support for shape annotations in Flutter SfPdfViewer. We do not have any immediate plans to implement this feature. At the planning stage for every release cycle, we review all open features and identify features for implementation based on specific parameters including product vision, technological feasibility, and customer interest. We will let you know when this feature is implemented. Kindly use the following link for track the status of the feature,
https://www.syncfusion.com/feedback/26332/support-for-shape-annotations
I am still trying to make this work, but this time with a drawing board stacked on top of the SfPdfViewer, so that I can draw a path and then send it to be translated into a shape on the right page of the PDF.
If you run the attached project, click the pen button in the bottom right to start annotating, then draw a line somewhere and finally click the check button in the bottom right, it draws the same shape into the PDF, but the coordinates are off to the top and to the left by a distance that is proportional to how far bottom-right you draw.
So obviously there is something wrong in my implementation of _getPdfCoordinates that is supposed to translated coordinates from the drawing board space into the PDF space. But it is inspired by your implementation and to be honest I don't fully understand it so I fail to see what is wrong.
Note that this time, I am using PdfPageLayoutMode.single as a pageLayoutMode, so there shouldn't be any issue with scrolling.
Can you please help me figure this out?
In the volume 2 SP release, we have added support for the onTap callback in SfPdfViewer. This callback provides the following information: page number, position, and page position. Through this, you can fulfill your requirements without _getPdfCorrdinates implementation. The release is expected to be available by the end of July. We will inform you once the release is rolled out.
We are glad to announce that the support for onTap callback is available from the Essential Studio 2023 Volume 2 Service Pack v22.2.5 release. Please find the download link below,
Package link: https://pub.dev/packages/syncfusion_flutter_pdfviewer/versions/22.2.5
Hello Deepika,
Unfortunately, this is not going to solve anything.
First of all, because with only the onTap event (corresponding to onPointerUp) and no event for pointer down and pointer move, it's basically useless for drawing.
And second of all, and more
importantly, the position sent in this callback is the local position in
the coordinate system of the PDF viewer, but not the coordinates in the
space of the PDF document itself. So it the document is zoomed in, if
there are margins around, or if it scrolled, we still need to translate
those coordinates into PDF coordinates, so we are back to square one.
Hi Sébastien Arbogast,
We have resolved the issue in your sample, and it can be downloaded from the attachment. As mentioned earlier, we have plans to implement shape annotation in SfPdfViewer. Kindly use the following link to track the status of this feature: https://www.syncfusion.com/feedback/26332/support-for-shape-annotations
Regards,
Deepika R
Your fix does not seem to work. I have attached 2 screenshots on my device, one with a black line in the bottom right corner corresponding to the line I drew in the component, and the second with a red line corresponding to the line drawn into the PDF with the translated coordinates. As you can see, they do not match.
Hi Sébastien Arbogast,
The reported issue is a platform-based issue. In the previously shared sample, we only fixed the issue on the Windows platform with a single page layout option. We are now working on updating the sample work for all platforms, including a single page layout and a continuous page layout with both vertical and horizontal scrolling. Kindly provide information about your platforms, preferred page layout options, scrolling, and zooming options. This information will help us provide the sample as soon as possible.
My primary targets for this feature would be web, Android and iOS (no Windows, Linux or macOS at this stage).
In terms of layout, I would like it to work primarily in single page layout mode, without any zooming or scrolling, but taking into account margins that may appear around the document depending on aspect ratio.
Ultimately, if it can also support scrolling and zooming in continuous layout, I could add the same feature in other parts of my application, but that's lower priority.
Hi Sébastien Arbogast ,
We have resolved the issue in the shared sample with the single page layout option. We have attached the modified sample along with the output screen recording, which can be downloaded from the attachment. Please try this and let us know if this meets your requirement.
Indeed, it is working well in iOS and Android now, but I still have the wrong coordinates in a web browser (see attached video).
Plus, I'm not sure about the way you initialize the kIsDesktop constant, as it does not take into account the mobile web browser situation.
We tried to replicate the reported issue on our side but the shared sample working fine in web platform. For your reference we have attached the output screen recording of the sample, which can be downloaded from the attachment. Kindly share the modified sample and steps/video for replicate the issue on our side. This will be helpful for us to provide the prompt solution.
In the attached video called "pdf_annotation with appbar", I am using your exact code, without any modification, on macOS 13.4.1, Chrome 115.0.5790.170, Flutter 3.10.6, and there is still a shift to the top or to the bottom, depending on whether I'm drawing toward the top or the bottom of the page.
In the other video, I simply commented the appbar in the scaffold, and you can see that the shift is even more there.
Regarding issue in chrome platform:
We have checked the reported issue on the web platform on a Windows machine, and it is working fine. However, the issue is only replicated when the Chrome window is maximized on macOS. The 'constrainSizeAndAttemptToPreserveAspectRatio' is not properly updated when the window size is changed to maximize on macOS. We checked the issue without the PDF Viewer, but we still faced the same issue.
