我希望能够在HTML 5画布中放大鼠标下的点,例如放大Google地图.我怎样才能做到这一点？
我正在编写一个HTML5 <canvas>项目,该项目涉及使用滚轮放大和缩小图像.我想像谷歌地图一样向光标缩放,但我完全迷失了如何计算动作.
我有什么:图像x和y(左上角); 图像宽度和高度; 光标x和y相对于画布的中心.
我知道这个问题已经被问过好几次了，但我找到的答案都不适合我。我需要允许用户缩放到目前为止有效的图像，这只是一个scale(factor)调用，但现在我想通过鼠标指针缩放。这证明更困难，因为我可以在指针效果上创建放大，但是当鼠标移动时，图像也会移动。在这个演示中可以看到：
https://editor.p5js.org/J-Cake/sketches/1r1wmWO60
我想我会将第二个翻译的坐标乘以比例因子，但这似乎也没有任何作用。我错过了什么？
let sf = 1; // scaleFactor
let x = 0; // pan X
let y = 0; // pan Y
let mx, my; // mouse coords;
function setup() {
createCanvas(400, 400);
}
function draw() {
mx = mouseX;
my = mouseY;
background(255);
translate(mx, my);
scale(sf);
translate(-mx, -my);
translate();
rect(100, 100, 100, 100);
if (mouseIsPressed) {
x -= pmouseX - mouseX;
y -= pmouseY - mouseY;
}
}
window.addEventListener("wheel", function(e) {
if (e.deltaY > 0)
sf …