在iFrame上顯示的PDF上的繪圖座標

首先，我很欣賞我的要求相當「雄心勃勃」，但任何幫助都非常感謝，因爲我不確定最佳的處理方式。在iFrame上顯示的PDF上的繪圖座標

用戶上傳PDF後在我的網站上（使用PHP/MySQL創建的）我想在頁面上內聯顯示PDF（我假設在一個iFrame中）。然後我需要他們能夠拖出一些「盒子」在PDF的頂部（我假設與jQuery）。然後我需要記錄這個盒子的座標，這樣以後我可以重新創建PDF，將新的文本注入定義的「盒子」中。

這聽起來可行嗎？如果不是，你會建議什麼？（請不要說imagemagick！）

我知道如何重新創建一個PDF注入新文本，但我的問題是如何讓用戶記錄這些座標。

來源

2013-03-26 chapmanio

您可以使用PDF.js在頁面上呈現PDF。 PDF.js會將其顯示爲頁面的一部分，以便您可以附加事件並以Acrobat插件顯示的方式與其進行交互。

我找不到一個預先存在的庫來獲取座標，所以我鞭打了這個代碼來實現它。

Live demo of selection code

$(function() { 
    "use strict"; 
    var startX, 
     startY, 
     selectedBoxes = [], 
     $selectionMarquee = $('#selectionMarquee'), 
     positionBox = function ($box, coordinates) { 
      $box.css(
       'top', coordinates.top 
      ).css(
       'left', coordinates.left 
      ).css(
       'height', coordinates.bottom - coordinates.top 
      ).css(
       'width', coordinates.right - coordinates.left 
      ); 
     }, 
     compareNumbers = function (a, b) { 
      return a - b; 
     }, 
     getBoxCoordinates = function (startX, startY, endX, endY) { 
      var x = [startX, endX].sort(compareNumbers), 
       y = [startY, endY].sort(compareNumbers); 

      return { 
       top: y[0], 
       left: x[0], 
       right: x[1], 
       bottom: y[1] 
      }; 
     }, 
     trackMouse = function (event) { 
      var position = getBoxCoordinates(startX, startY, 
       event.pageX, event.pageY); 
      positionBox($selectionMarquee, position); 
     }; 


    $(document).on('mousedown', function (event) { 
     startX = event.pageX; 
     startY = event.pageY; 
     positionBox($selectionMarquee, 
      getBoxCoordinates(startX, startY, startX, startY)); 
     $selectionMarquee.show(); 
     $(this).on('mousemove', trackMouse); 
    }).on('mouseup', function (event) { 
     var position, 
      $selectedBox; 

      $selectionMarquee.hide(); 

      position = getBoxCoordinates(startX, startY, 
       event.pageX, event.pageY); 

      if (position.left !== position.right && 
      position.top !== position.bottom) { 
       $selectedBox = $('<div class="selected-box"></div>'); 
       $selectedBox.hide(); 
       $('body').append($selectedBox); 

       positionBox($selectedBox, position); 

       $selectedBox.show(); 

       selectedBoxes.push(position); 

       $(this).off('mousemove', trackMouse); 
      } 
    }); 
});

你將不得不調整它來獲取相對於一旦你顯示它的PDF座標，但是這應該讓你在正確的軌道上。

來源

2013-03-27 08:08:32

非常感謝你的回答和例子，這超出了我期待的/希望的！當我明天得到一些時間（希望）時，我會試一試，並讓你知道我如何繼續。 – chapmanio 2013-03-27 18:24:28

如果它有助於您隨意投票;-) – 2013-03-28 02:53:16

我發現，在實現此代碼時，如果將畫布顯示爲PDF而不是整個文檔，導致「mouseup」事件失敗。如果我拖出代碼來繪製該框，但顯然我更願意將其保留。我會自己繼續測試這個，但是我已經上傳了一個例子，以防你知道什麼可能導致這個@UselessCode。 tarakan.chapmanio.co.uk/pdf/pdf.html – chapmanio 2013-05-12 14:02:34

在iFrame上顯示的PDF上的繪圖座標

回答

相關問題