如何制作变焦 canvas

Question

如何使缩放 function 像这里https://www.jqueryscript.net/demo/jQuery-Plugin-For-Adding-Notes-Markers-To-An-Image-imgNotes/examples/ 。 但是插入图像我有 canvas ，您可以在其中上传 pdf 文件，当我在该位置单击 canvas 时，它会创建一个带有图像的 div。 这是创建 div 的代码

$(function () {
$("#the-canvas").click(function (e) {
    var x = e.pageX;
    var y = e.pageY;
    var xMax = 2900;
    var yMax = 2900;
    var img = $('<img class="comment" src="indeksiraj-1.png" alt="myimage" />');

    var divMark = document.createElement("div");

    divMark.classList = `markers mark-${counter}`;

    $(divMark).css({
        position: "absolute",
        left: x - 10 + "px",
        top: y - 10 + "px",
    });
    

    

    $(divMark).append(img);
    $(marksCanvas).append(divMark);

    

    var imgHeight = img.outerHeight();
    if (y + imgHeight > yMax) {
        divMark.css("top", yMax - imgHeight);
    }

    var imgWidth = img.outerWidth();
    if (x + imgWidth > xMax) {
        divMark.css("left", yMax - imgWidth);
    }
});
});

这是演示https://jsfiddle.net/SutonJ/35e2osa1/18/

Answer 1

尝试添加<OrbitControls/> （您必须导入它并对其进行一些修改，以便您只能缩放而不是四处移动，但它应该可以解决问题）