Question

首先，我感谢我的要求非常“雄心勃勃”，但我们非常感谢任何帮助，因为我不确定最佳方式。

在用户上传PDF后，在我的网站（使用PHP / MySQL构建）上，我希望在页面上显示PDF内联（我假设在iFrame中）。然后我需要它们能够在PDF上拖出一些“盒子”（我假设使用jQuery）。然后，我需要记录此框的坐标，以便稍后我可以重新创建PDF，将新文本注入已定义的“框”。

这听起来可行吗？如果没有，你会建议什么？（请不要说imagemagick！）

我知道如何重新创建PDF注入新文本，但我的问题是如何允许用户记录这些坐标。

Answer 1

您可以使用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的坐标，但这应该可以使您走上正确的轨道。

在iFrame中显示的PDF上的绘图坐标

1 个答案: