9

まず、私のリクエストが非常に「野心的」であることに感謝しますが、最善の方法がわからないため、助けていただければ幸いです。

ユーザーがPDFをアップロードした後の私のサイト（PHP / MySQLで構築）で、PDFをページにインラインで表示したいと思います（iFrameで想定しています）。次に、PDFの上にいくつかの「ボックス」をドラッグできるようにする必要があります（jQueryを想定しています）。次に、このボックスの座標を記録する必要があります。そうすれば、後でPDFを再作成して、定義された「ボックス」に新しいテキストを挿入できます。

これは実行可能ですか？そうでない場合、他に何を提案しますか？（imagemagickとは言わないでください！）

新しいテキストを挿入するPDFを再作成する方法は知っていますが、私の問題は、ユーザーがそれらの座標を記録できるようにする方法にあります。

4

1 に答える 1

15

PDF.jsを使用して、ページにPDFをレンダリングできます。PDF.jsはそれをページの一部として表示するので、Acrobatプラグインで表示されていた場合とは異なる方法で、イベントを添付して操作することができます。

座標を取得するための既存のライブラリが見つからなかったため、このコードを作成して実装しました。

選択コードのライブデモ

$(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-27T08:08:32.483 に答える