Can I make zoom functionality when I zoom to look like I’m zooming but actually I’m not zooming.
My project is to make an app where you can upload pdf files, click on a button to create a mark that you can grab and move where you want. I made that part but I can’t implement zoom functionality.
This is code for creating a mark also for moveing the mark:
function creatContent() {
var divMark = document.createElement("div");
divMark.classList = `markers mark`;
var pCounter = document.createElement("p");
pCounter.classList = "p-counter";
pCounter.innerHTML = showCounter;
divMark.appendChild(pCounter);
var img = $('<img class="comment" src="data:image/png;base64,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" alt="myimage" />');
$(divMark).append(img);
$(marksCanvas).append(divMark);
window.onload = addListeners();
function addListeners() {
divMark.addEventListener("mousedown", mouseDown, false);
window.addEventListener("mouseup", mouseUp, false);
}
function mouseUp() {
window.removeEventListener("mousemove", divMove, true);
}
function mouseDown(e) {
window.addEventListener("mousemove", divMove, true);
}
function divMove(e) {
var x = e.pageX;
var y = e.pageY;
divMark.style.top = y + "px";
divMark.style.left = x + "px";
zoomIn.onclick = function () {
var myImg = document.getElementById("the-canvas");
var currWidth = myImg.clientWidth;
if (currWidth == 700) return false;
else {
myImg.style.width = currWidth + 100 + "px";
}
divMark.style.left = x + 30 + "px";
divMark.style.top = y + 22 + "px";
}
}
showCounter++;
}
Here is demo https://jsfiddle.net/SutonJ/ru2g0s4d/27/.