Add annotation programmatically

[Frederic Serreau]

Hi, 

We try to add image annotation programmatically in the middle of document.

But we can't do it.

If I get the size document with LoadEvent : event.PageData.PageSizes, I found width : 818, height : 1057

The middle widht is logically 409

But if I set X to 409 is not the middle in the viewer;

Manually, after export, the middle is around 250. 

pdfAnnotation.0.stampAnnotations[0].Rect.Location.X

and

pdfAnnotation.0.stampAnnotations[0].Rect.X

The size of pdfViewer is not the size of the pdf document.

So, how i found the real width and height of the pdfViewer view, and so found the middle.

Thanks.

[Vasugi Sivajothi]

Hi Serreau, 

 

Thank you for contacting Syncfusion support. 

 

You can manually set the width and height of the Viewer using the Width and Height property in the PDF Viewer. Please refer to the below code snippet. From that, you can find the middle width of the PDF Viewer. 

 

Code Snippet: 

 

<SfPdfViewerServer @ref="Viewer" DocumentPath="@DocumentPath" Height="500px" Width="100%"> 

</SfPdfViewerServer> 

 

 

Please let us know if you have any concerns about this. 

 

Regards, 

Vasugi. 

[Frederic Serreau]

Hi, thanks for your response.

But it's not exactly what I want.

For Demo, my pdfViewer composant has Height="70vh"

I get size whith getBoundingClientRect in JS, his size is : width: 1614, height: 678.296875

If I want add my annotation to the middle, I think I have to take widht divide by 2 and height divide by 2.

So x = 807

y = 339.1484375

But the annotation is over limit.

If I place the annotation manually approximatly to the middle, and export, I found 

  "X": 529.5

  "Y": 339.14844

if I take the element with id pdfViewerId_textLayer_PageNumber the size is not corresponding to.

I join my demo in 7zip.

Thanks

Attachment: BlazorWebAssembly_4b0b923a.7z

[Dhivyabharathi Mohan]

Hi Serreau, 

 

Thank you for the update and the sample. 

 

We suspect that the reported issue occurs due to the conversion calculation of the bounds. We suggest you to use the below code snippet to get the issue resolved. We have shared the modified sample for your reference. 

 

In our PDF Viewer, the exported data is in points. But in the client-side, the bounds positions are in pixel. So, the exported annotations bounds are mismatched with the imported data. We suggest you use the below calculation for converting the point to pixels to match with the imported data bounds. 

 

 

Code snippet to convert Point to Pixel: 

 

X = x * 0.75  

Y = y * 0.75 

Width = width * 0.75  

Height = height * 0.75  

 

 

 

 

 

Code snippet for conversion of the bounds: 

 

 

x = (pageSize[0].Width * 0.75) / 2 - (imageWidth / 2);
y = (pageSize[0].Height * 0.75) / 2 - (imageHeight / 2); 

 

 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorWebAssembly-451824183 

 

 

Kindly try this and revert us, if you have any concerns. 

 

 

Regards, 

Dhivya.

[Frederic Serreau]

Hi, 

the conversion number 0.75 is ok for me, that's work.

Tanks.

[Dhivyabharathi Mohan]

Hi Frederic, 

Thank you for your update. We are glad to know that the reported issue is resolved. 

Regards, 

Dhivya.