1

不久前我问过这个问题，关于如何在浏览器内联显示的 PDF 上绘制坐标。

@UselessCode 对他们的回复很有帮助，将我指向pdf.js并提供了如何记录拖动到页面上的框的坐标的现场演示。

我一直在我的页面上对此进行试验，并且在显示 PDF 的画布元素上遇到了 mouseup 事件的一些问题。在此示例中，您可以看到 mousedown 事件与 mousemove 事件一起触发，但不是 mouseup 事件。

$(function () {
"use strict";
var startX,
    startY,
    selectedBoxes = [],
    $selectionMarquee = $('#selectionMarquee'),
    $allCords = $('#all-cords'),
    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);
        console.log(position);
        positionBox($selectionMarquee, position);
    },
    displayCoordinates = function () {
        var msg = 'Boxes so far:\n';

        selectedBoxes.forEach(function (box) {
            msg += '<li>(' + box.left + ', ' + box.top + ') - (' + (box.left + box.right) + ', ' + (box.top + box.bottom) + ')</li>';
        });
        $allCords.html(msg);
    };


$('#the-canvas').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);
            displayCoordinates();
            $(this).off('mousemove', trackMouse);
        }
});
});

我玩过这个，当我向画布添加绝对或固定定位时，似乎触发了 mouseup 事件，但是之后 mousemove 事件不会触发。

我很抱歉为此提出一个单独的问题，但我试图恢复我之前的问题无济于事，而且我真的坚持我的项目，直到我可以让这部分工作！

4

0 回答 0