Question

我想获得pdf点击x y坐标。出于这个原因，我将div叠加在pdf的顶部，我得到了坐标。这种方法的问题是坐标根据显示器的DPI而不同。您是否有任何热门建议可以获得点击事件的pdf坐标我正在使用带有angularjs的c＃mvc。这些是我得到的坐标

Answer 1

如果你能够从显示pdf的区域获得一个点，你可以得到一个比例：

x = xGotFromClick * pdfHeight/ContainerHeight;

其中xGotFromClick是pdf容器中的一个点。

例如，
根据ISO 216页面宽度与高度的比例为1：sqr（2）~1：1.414。所以，以免说：

- 你有一个500x707容器的窗口。
- 在这个容器内，你有1200x1697 pdf。

因此，从容器中获得的每个点需要在x和1697/707上以1200/500进行调整。这就是你如何获得实际位置的方法。

潜在问题：
您的计算与容器小于PDF的情况一样失真。
如果您的pdf比容器大十倍（例如移动设备），您可以平均计算。对于200宽度容器和2000宽度pdf点xGotFromClick = 10内部caontainer可以相当于pdf上100到109之间的点。因此，最好将其视为（~105）之间的某种东西：

x = ((2 * xGotFromClick +1)* pdfHeight)/(2 * ContainerHeight );

或更简单：

x = (xGotFromClick + 0.5)* pdfHeight/ContainerHeight;

关于接收点击次数：
https://www.kirupa.com/snippets/move_element_to_click_position.htm

Answer 2

根据您想要的dpi设置iframe和div的高度和宽度。
在以下示例中，基于72dpi设置了iframe高度。

72dpi的A4尺寸为*'宽x高= 595 x 842 pt'。 300dpi的A4尺寸为*'宽x高= 2480 x 3508 pt'。 3.示例（可拖动和可点击）：

<!DOCTYPE html>
<html>
<title>Pdf Example</title>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <script type="text/javascript"
            src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"
            integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="
            crossorigin="anonymous"></script>

</head>
<body>
    <div id="full-iframe-container" class="hide" style="">

        <div id="iframe-cover" style="position: absolute; height: 842px; width: 595px;z-index: 999;">
            <div id="signature-position" class="drag" style="color: white;background:red;padding:2px;cursor:pointer">Signature Here</div>
        </div>
        <iframe id="iframe-full" src="https://yourpdffile.com/1.pdf" frameborder="1" scrolling="no" style="overflow: hidden;  height:842px;width:595px; pointer-events: none;z-index: 0;"></iframe>

    </div>


    <script type="text/javascript">
        $(document).ready(function () {
            //Set default position for signatures
            $("#signature-position").css({ top:100, left: 100, position: 'absolute' });

        });

        //Dragable Start
        $('.drag').draggable({
            scroll: true,
            start: function () {
                $(this).data("startingScrollTop", $(this).parent().scrollTop());
                $("#signature-position").css({ background: 'green', color: 'white', cursor: 'move' });
            },
            drag: function (event, ui) {
                var st = parseInt($(this).data("startingScrollTop"));
                ui.position.top -= $(this).parent().scrollTop() - st;

                var positionX = $("#signature-position").position().left;
                var positionY = $("#signature-position").position().top - 65;
                $("#signature-position").css({ background: 'green', color: 'white', cursor: 'move' }).html('Sign Here - Positions:' + positionX + "X" + positionY);
            },
            cursor: 'move'
        });
        $("#iframe-cover").droppable({
            drop: handleDropEvent,
            tolerance: "touch",
        });
        function handleDropEvent(event, ui) {
            $("#signature-position").css({ background: 'red', color: 'white', cursor: 'pointer' });
        }
        //End Dragable


        //on click
        $('#iframe-cover').click(function (e) {

            var iframeOffset = $('#iframe-full').offset();

            var positionX = e.pageX - (iframeOffset.left + 10);
            var positionY = e.pageY - (iframeOffset.top + 65);

            $("#signature-position").css({ top: positionY + 65, left: positionX, position: 'absolute' }).html('Sign Here - Positions:' + positionX + "X" + positionY);
        });
    </script>
</body>
</html>

试图从PDF获取x y坐标

2 个答案: