Масштабирование центральной точки на холсте HTML 5

Question

Позвольте мне начать с того, что я не являюсь профессиональным разработчиком, но я управляю проектом разработки, у которого есть конкретная потребность c - масштабировать изображение, помещенное на холст HTML5, от центральной точки используя ползунок . Разработчик внедрил ползунок, который масштабирует изображение от верхней левой точки, но удобство и простота использования диктует изменение размера от центра, и он не смог понять это. Это вообще возможно? Пожалуйста, ознакомьтесь с бета-версией приложения, предварительно загруженного для тестирования изображения:

http://beta.drumart.com/head-builder?lib-image-url=https: //thumbs.dreamstime.com/800thumbs/12617/126170273.jpg

Нажмите на изображение, чтобы выбрать его, и используйте ползунок «Размер» для изменения размера. Я просто хочу выяснить, возможно ли это, и, если да, указать ему правильное направление. Заранее большое спасибо!

Скриншот слайдера изображения

Answer 1

Я рекомендую создать функцию drawCenteredImage(), дать ей изображение, x, y, width, height, и оно будет рисовать изображение с центром в заданных x, y. Таким образом, когда вы увеличиваете x и y, он масштабируется вокруг центра изображения.

function drawCenteredImage(img, x, y, width, height) {
    // Assuming globally accessible canvas context variable 'context'
    context.drawImage(img, x - width / 2, y - height / 2, width, height);
}

Пример использования:

% Обновляется в масштабе в реальном времени%

let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
let image = new Image();
image.onload = function() {
	drawImg();
};

image.src = "https://thumbs.dreamstime.com/800thumbs/12617/126170273.jpg";

function drawCenteredImage(img, x, y, width, height) {
    // Assuming globally accessible canvas context variable 'context'
    context.drawImage(img, x - width / 2, y - height / 2, width, height);
}

function drawImg() {
	context.fillStyle = "white";
	context.fillRect(0,0,canvas.width,canvas.height);
  let scale = document.getElementById("scl").value;
  drawCenteredImage(image, canvas.width / 2, canvas.height / 2, image.width * scale, image.height * scale);
}

let mousedownID = -1;
function mousedown(event) {
  if(mousedownID==-1)
     mousedownID = setInterval(drawImg, 5);


}
function mouseup(event) {
   if(mousedownID!=-1) {  //Only stop if exists
     clearInterval(mousedownID);
     mousedownID=-1;
   }

}

//Assign events
document.getElementById("scl").addEventListener("mousedown", mousedown);
document.getElementById("scl").addEventListener("mouseup", mouseup);
//Also clear the interval when user leaves the window with mouse
document.addEventListener("mouseout", mouseup);

<input id="scl" type="range" min="0" max="1" value="0.3" step="0.05">
<canvas id="canvas" width="500px" height="400px"></canvas>