Not clear how to use ZoomToRect method on PDF Viewer

I'm looking for an example of how to use the zoomToRect method on the PDFViewer described here:

https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#zoomtorect

It's looking for a rectangle object to be passed in, but I don't see a description or example of what a rectangle object is in the documentation. Trying to use a rectangle as shown in this example (https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/annotation/shape-annotation#adding-a-shape-annotation-to-the-pdf-document-programmatically) doesn't seem to have any effect.

If I can get an example of what a Rectangle object should be for the zoomToRect method, or if there's a way to zoom to a specific annotation by an annotation ID, that would be very helpful


3 Replies

SK Sathiyaseelan Kannigaraj Syncfusion Team November 1, 2024 09:31 AM UTC

Hi Amir Karbasi,

Thank you for reaching out to us. You can zoom to a specific position using the bounds of the zooming area with the `DOMRect()` method. Below, we have provided a sample that includes a button for zooming to a particular position using the `ZoomToRect()` method.

Code Snippet:

const ZoomToRect = () => {

        var rectangle = new DOMRect(700, 500, 500, 100);

        viewer.zoomToRect(rectangle);

};


Zoom to Particular position sample 


Regards,
Sathiyaseelan K



AK Amir Karbasi November 1, 2024 06:02 PM UTC

Thanks for the information, I was expecting the rectangle to be a rectangle on the PDF rather than bounds of a DOM Area, so I don't think I can use this method for what I need.


Is there another method I can use to scroll the PDF to a specific annotation? I can scroll to a specific page, but sometimes the annotation is lower on the page and isn't immediately visible.  Basically I want the PDF to scroll exactly like what happens when selecting an annotation from the list of comments, but I want to do it programmatically.



SK Sathiyaseelan Kannigaraj Syncfusion Team November 4, 2024 12:53 PM UTC

Hi Amir Karbasi,

Thank you for your patience. You can navigate to a specific annotation's position either by using the `ZoomToRect` method with the annotation's bounds or by selecting the annotation directly within the PDF. Below, we have provided a sample that demonstrates both scenarios. Clicking the "Zoom To Position" button will zoom in on a specific annotation using its bounds, while clicking the "Focus Annotation" button will move the page view to the annotation's position.

Move to annotations position sample
 


Regards,
Sathiyaseelan K


Loader.
Up arrow icon