如果布局为水平，PDFTron绘制垂直框

问题描述

我有以下代码，当用户按下“ 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,1);
        rectangleAnnot.strokeThickness = 2;
        rectangleAnnot.Author = annotManager.getCurrentUser();

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

现在的问题是，如果PDF是垂直的，则上面的代码可以很好地绘制矩形，但是如果PDF是水平的，则可以垂直绘制Rectangle。请检查以下屏幕截图以供参考。

如您在第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,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,};
      case CoreControls.PageRotation["E_270"]:
        return {
          width: 14,};
    }
  };

您可以从实例访问CoreControls对象。请注意，您还需要根据旋转来调整X，Y坐标。 This is a good resource on PDF coordinates and viewer coordinates可以帮助您将头部包裹住。

javascript pdftron