javascript - 使用 pdf.js 在画布内的 pdf 上绘制一个矩形

Question

我应该在画布的 pdf 文档内绘制一个矩形，但它会清除文档的背景。我想要一种在不清理背景的情况下在其中绘制矩形的方法。请任何人都可以帮我解决这个问题。

以下是我正在使用的代码：

$("#div").mouseover(function () {

    $("canvas").on('click', function (e) {

        console.log(nr)
        id = ($(this).attr("id"));
        console.log(id)
        const baseImage = loadImage("");
        var canvas = document.getElementById(id);
        var ctx = canvas.getContext('2d');
        Canvas = ctx;

        var canvasx = $(canvas).offset().left;
        var canvasy = $(canvas).offset().top;
        var last_mousex = last_mousey = 0;
        var prev_x = prev_y = prev_w = prev_h = 0;
        var mousex = mousey = 0;
        var mousedown = false;


        $(canvas).on('mousedown', function (e) {

            if (rectanglearray.length < 2) {

                last_mousex = parseInt(e.clientX - canvasx);
                last_mousey = parseInt(e.clientY - canvasy);
                mousedown = true;
            }
        });

        $(canvas).on('mouseup', function (e) {

            mousedown = false;

        });
        $(canvas).on('mousemove', function (e) {
            mousex = parseInt(e.clientX - canvasx);
            mousey = parseInt(e.clientY - canvasy);
            if (mousedown) {
                //if (rectanglearray.length < 2) {
                ctx.clearRect(0, 0, canvas.width, canvas.height); //clear canvas
                ctx.beginPath();
                var width = mousex - last_mousex;
                var height = mousey - last_mousey;
                ctx.rect(last_mousex, last_mousey, width, height);
                a = last_mousex;
                b = last_mousey;
                c = last_mousex + width;
                d = last_mousey + height;
                gjer = width;
                lart = height;
                t = a;
                h = b;
                gjere = gjer;
                larte = lart;
                nfq = id.substring(3, 4);
                ctx.strokeStyle = 'black';
                ctx.lineWidth = 1;
                ctx.stroke();

                rectanglearray.push(ctx);
                //}
            }
        });
        execute++;

    });
});

因此，当我单击其中一个 pdf 页面时，它需要页面 id，并且只允许在该页面中绘制一个矩形，但是当我绘制它时，它会清除背景。

标签： javascriptjquerycanvasdrawrectangle