如果布局為水平，PDFTron 繪制垂直框

Question

我有下面的代碼，當用戶按下“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 頁上繪制得很好。 那么如何解決呢？

Answer 1

您需要考慮頁面旋轉以確保您的矩形與頁面對齊。 這是一個快速示例，說明如何使用getCompleteRotation API 通過根據文檔旋轉設置寬度和高度來實現這一點。

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 坐標和查看器坐標的好資源，可幫助您了解該部分。