我正在编写一个HTML5 <canvas>项目,该项目涉及使用滚轮放大和缩小图像.我想像谷歌地图一样向光标缩放,但我完全迷失了如何计算动作.
我有什么:图像x和y(左上角); 图像宽度和高度; 光标x和y相对于画布的中心.
我试图在画布上创建缩放效果,我已经设法做到了,但是有一个小问题.缩放(缩放)原点位于画布的左上角.如何指定缩放/缩放原点？
我想我需要使用,translate但我不知道应该如何以及在哪里实现它.
我想用作缩放原点的是鼠标位置,但为简单起见,画布的中心可以.
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
canvas.width = 600;
canvas.height = 400;
var global = {
zoom: {
origin: {
x: null,
y: null,
},
scale: 1,
},
};
function zoomed(number) {
return Math.floor(number * global.zoom.scale);
}
function draw() {
context.beginPath();
context.rect(zoomed(50), zoomed(50), zoomed(100), zoomed(100));
context.fillStyle = 'skyblue';
context.fill();
context.beginPath();
context.arc(zoomed(350), zoomed(250), zoomed(50), 0, 2 * Math.PI, false);
context.fillStyle = 'green';
context.fill();
}
draw();
canvas.addEventListener("wheel", trackWheel);
canvas.addEventListener("wheel", zoom);
function zoom() {
context.setTransform(1, …