Блог

У меня есть приведенный ниже код, который будет рисовать прямоугольник, когда пользователь нажимает «Shift щелчок левой кнопкой мыши»

  // Draw text box with alt   mouse left click
docViewer.on('click', (evt: any) => {
    if (evt.shiftKey) {
        // Get get window coordinates
        const windowCoords = getMouseLocation(evt);

        // Get current page number
        const displayMode = docViewer.getDisplayModeManager().getDisplayMode();
        const page = displayMode.getSelectedPages(windowCoords, windowCoords);
        const clickedPage = (page.first !== null) ? page.first : docViewer.getCurrentPage();

        // Get page coordinates
        const pageCoordinates = displayMode.windowToPage(windowCoords, clickedPage);

        // create rectangle
        const rectangleAnnot = new instanceAnnotations.RectangleAnnotation();
        rectangleAnnot.PageNumber = clickedPage   1;
        rectangleAnnot.X = pageCoordinates.x;
        rectangleAnnot.Y = pageCoordinates.y - 14;
        rectangleAnnot.Width = 200;
        rectangleAnnot.Height = 14;
        rectangleAnnot.StrokeColor = new instanceAnnotations.Color(255, 0, 0, 1);
        rectangleAnnot.StrokeThickness = 2;
        rectangleAnnot.Author = annotManager.getCurrentUser();

        annotManager.addAnnotation(rectangleAnnot, false);
        annotManager.redrawAnnotation(rectangleAnnot);
    }
});
  

Теперь проблема в том, что код выше рисует прямоугольник нормально, если PDF вертикальный, но если PDF горизонтальный, то он рисует прямоугольник вертикально. Пожалуйста, проверьте скриншот ниже для справки.

Как вы можете видеть на странице 1, он рисует вертикальный прямоугольник, но на 2-й странице он рисует нормально. Итак, как это можно решить?

Вам необходимо учитывать поворот страницы, чтобы убедиться, что ваш прямоугольник выровнен со страницей. Вот краткий пример того, как вы можете добиться этого с помощью API getCompleteRotation, установив ширину и высоту в зависимости от поворота документа.

 docViewer.on("click", (evt) => {
if (evt.shiftKey) {
  // Get get window coordinates
  const windowCoords = getMouseLocation(evt);

  // Get current page number
  const displayMode = docViewer.getDisplayModeManager().getDisplayMode();
  const page = displayMode.getSelectedPages(windowCoords, windowCoords);
  const clickedPage =
    page.first !== null ? page.first : docViewer.getCurrentPage();

  // Get page coordinates
  const pageCoordinates = displayMode.windowToPage(
    windowCoords,
    clickedPage
  );

  // create rectangle
  const rectangleAnnot = new Annotations.RectangleAnnotation();
  rectangleAnnot.PageNumber = clickedPage   1;

  // Depending on doc orientation set Width and Height
  const rotation = docViewer.getCompleteRotation(clickedPage);

  const widthAndHeight = getWidthAndHeightBasedOnRotation(rotation);
  // You will have to adjust the X, Y  as well depending on rotation
  rectangleAnnot.X = pageCoordinates.x;
  rectangleAnnot.Y = pageCoordinates.y;

  rectangleAnnot.Width = widthAndHeight.width;
  rectangleAnnot.Height = widthAndHeight.height;
  rectangleAnnot.StrokeColor = new Annotations.Color(255, 0, 0, 1);
  rectangleAnnot.StrokeThickness = 2;
  rectangleAnnot.Author = annotManager.getCurrentUser();

  annotManager.addAnnotation(rectangleAnnot, false);
  annotManager.redrawAnnotation(rectangleAnnot);
}});

  const getWidthAndHeightBasedOnRotation = (rotation) => {
    switch (rotation) {
      case CoreControls.PageRotation["E_0"]:
        return {
          width: 200,
          height: 14,
        };
      case CoreControls.PageRotation["E_90"]:
        return {
          width: 14,
          height: 200,
        };
      case CoreControls.PageRotation["E_180"]:
        return {
          width: 200,
          height: 14,
        };
      case CoreControls.PageRotation["E_270"]:
        return {
          width: 14,
          height: 200,
        };
    }
  };
  

Вы можете получить доступ к объекту CoreControls из экземпляра. Пожалуйста, обратите внимание, что вам также нужно будет настроить координаты X, Y на основе поворота. Это хороший ресурс по координатам PDF и координатам просмотра, который поможет вам разобраться в этой части.