javascript - HTML 5 Canvas 上的中心点缩放

Question

首先我要说的是，我不是专业开发人员，但我正在管理一个具有特定需求的开发项目 - 使用 slider 从中心点缩放放置在 HTML5 Canvas 上的图像/em>.开发人员实现了一个 slider ，可以从左上角缩放图像，但可用性要求从中心调整大小，而他无法弄清楚。这可能吗？请参阅此处，了解预加载了要测试的图像的应用程序测试版:

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

单击图像将其选中，然后使用“大小” slider 调整大小。我只是想知道这是否可能，如果可以，请为他指出正确的方向。非常感谢!

Image slider screenshot

Answer 1

我建议创建一个 drawCenteredImage() 函数，给它一个图像、x、y、宽度、高度，它将以给定的 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>