WebViewer rotation issue

Technical Support
1

When the sample pdf is loaded in the viewer, it is thought that the coordinate values ​​are rotated.
So, if you draw the annotation with the coordinate value, it is rotated and shown.
Please tell me how to draw it as if it wasn’t rotated.>

PDF.js Express Version
7.1.0

Detailed description of issue
When the sample pdf is loaded in the viewer, it is thought that the coordinate values ​​are rotated.
So, if you draw the annotation with the coordinate value, it is rotated and shown.

Expected behaviour

  1. Get rotation information
  2. Coordinate transformation according to rotation
    3.Drawing annotation by reflecting rotation

Link to document

image
image1280×914 76.5 KB

Code snippet

const windowCoordinates = {x:  e.pageX + scrollLeft, y: e.pageY + scrollTop };

const displayMode = instance.docViewer.getDisplayModeManager().getDisplayMode();
const page = displayMode.getSelectedPages(windowCoordinates, windowCoordinates);
const clickedPage = (page.first !== null) ? page.first : instance.docViewer.getCurrentPage() - 1;
const pageCoordinates = displayMode.windowToPage(windowCoordinates, clickedPage);

…

  newAnnot = new Annotations.FreeTextAnnotation();
  newAnnot.Width = 100;
  newAnnot.Height = 100;
  newAnnot.X = pageCoordinates.x;
  newAnnot.Y = pageCoordinates.y;
  newAnnot.FontSize = fontSize;
  newAnnot.TextColor = new Annotations.Color(0, 0, 0);
  newAnnot.setPadding(new Annotations.Rect(0, 0, 0, 0));
  newAnnot.StrokeThickness = 0;

Sample PDF:
https://www.fsc.go.kr/downManager?bbsid=BBS0030&no=106789

3

Hi!

In order to do this you will need to check the pages rotation and set your X and Y values based on that.

To get the rotation you can use the getCompleteRotation API.

If the rotation is 90 or 270 degrees you need to swap your X and Y values.

I hope this helps!
Thanks,
Logan