Увеличить холст по отношению к координатам мыши ⇐ Html

[Anonymous]

У меня очень простое приложение, на котором я отлично рисую изображение на холсте. Я переводил контекст по image.width/2, image.height/2 и устанавливаю пункт назначения как -image.width/2, -image.height/2.

Код: Выделить всё

        function draw() {
window.canvas = document.getElementById('canvas');
window.ctx = canvas.getContext('2d');
window.image = document.createElement("img");
image.onload = function() {
canvas.width = image.width;
canvas.height = image.height;
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.translate(image.width/2,image.height/2);
ctx.drawImage(image,-image.width/2,-image.height/2);
};
image.src = 'rec.JPG';
}
< /code>

Это отображает изображение, как оно должно быть. Таким образом, учитывая это, что, если я хочу сделать центральную точку изображения в центре холста, я должен сделать это, как я это делал выше. Теперь я хочу, чтобы пользователь нажимал на Canvas, я получаю координаты мыши. Затем я хочу масштабировать это изображение и перерисовать холст, так что пользователь увидит эту часть изображения в центре (масштабная версия). Код следующим: < /p>

        function zoom(evt) {
var x = getMousePos(canvas, evt).x;
var y = getMousePos(canvas, evt).y;
canvas.width = image.width;
canvas.height = image.height;
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.translate(x,y);
ctx.scale(1.5, 1.5);
ctx.drawImage(image,-x,-y);
}

function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
< /code>

Но я не получаю правильные результаты. Я хочу увидеть регион, куда пользователь щелкнул, а затем я снова хочу нажать, чтобы увеличить, и вот и все. Я могу легко сделать более позднюю часть, но у меня проблемы с масштабированием идеального региона. Я видел похожие вопросы о Stackoverflow, но они не отвечают моим требованиям. Это мой HTML и CSS: < /p>

    
.container {
height: 500px;
}
.container .image-container {
height: 500px;
width: 50%;
overflow: auto;
position: absolute;
border: 1px solid;
}

img {
display: none;
}

canvas {
width: 100%;
}









< /code>

p.s: я не хочу панорамирования. Просто увеличивайте и выходите на клики.  Вы можете играть со фрагментом.        function draw() {
window.canvas = document.getElementById('canvas');
window.ctx = canvas.getContext('2d');
window.image = document.createElement("img");
window.isZoom = false;
image.onload = function() {
canvas.width = image.width;
canvas.height = image.height;
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.translate(image.width/2,image.height/2);
ctx.drawImage(image,-image.width/2,-image.height/2);
};
image.src = 'https://d85ecz8votkqa.cloudfront.net/support/help_center/Print_Payment_Receipt.JPG';
}

function zoom(evt) {
if(!isZoom) {
var x = getMousePos(canvas, evt).x;
var y = getMousePos(canvas, evt).y;
canvas.width = image.width;
canvas.height = image.height;
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.translate(x,y);
ctx.scale(2, 2);
ctx.drawImage(image,-x,-y);
canvas.style.cursor = 'zoom-out';
isZoom = true;
} else {
canvas.width = image.width;
canvas.height = image.height;
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.translate(image.width/2,image.height/2);
ctx.drawImage(image,-image.width/2,-image.height/2);
isZoom=false;
canvas.style.cursor = 'zoom-in';
}
}

function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}< /code>
    
.container {
height: 500px;
}
.container .image-container {
height: 500px;
width: 50%;
overflow: auto;
position: absolute;
border: 1px solid;
}

img {
display: none;
}

canvas {
width: 100%;
cursor: zoom-in;
}
< /code>

Подробнее здесь: https://stackoverflow.com/questions/526 ... cordinates