ComPDFKit
Get TrialContact Sales
DemoFAQTechnical Support
Guides

Coordinates ​

The (0, 0) point is located at the top left of the page in WebViewer. The x axis extends horizontally to the right and the y axis extends vertically downward.

Convert PDF coordinates to Window coordinates ​

javascript
const pageNumber = 1;
const pagePoint = {
    x: 0,
    y: 0
};

const windowPoint = docViewer.pageToWindow(pagePoint, pageNumber);
// { x: 47, y: 64 }

Convert Window coordinates to PDF coordinates ​

javascript
const pageNumber = 1;
const windowPoint = {
    x: 47,
    y: 64
};

const pagePoint = docViewer.windowToPage(windowPoint, pageNumber);
// { pageNumber: 1, x: 0, y: 0 }

Convert coordinates of clicked point to PDF coordinates ​

javascript
const getMouseLocation = e => {
  const scrollElement = docViewer.getScrollViewElement();
  const scrollLeft = scrollElement.scrollLeft || 0;
  const scrollTop = scrollElement.scrollTop || 0;

  return {
    x: e.pageX + scrollLeft,
    y: e.pageY + scrollTop
  };
}

const handleClick = (e) => {
  let windowCoordinates = getMouseLocation(e);
  const page = docViewer.getSelectedPage(windowCoordinates, windowCoordinates);

  const clickPageNumber = (page.first !== null) ? page.first : docViewer.getCurrentPage();
  const pagePoint = docViewer.windowToPage(windowCoordinates, clickPageNumber);
}

docViewer.addEvent('click', handleClick);