我正在尝试使用 p5.js 实现缩放功能。当前缩放级别以及 x 和 y 位置存储在controls.viewobject. 默认或 (0, 0) 位置在左上角。问题是在放大/缩小时调整 x 和 y 位置值，以便无论视图的当前位置是什么，它都会停留在缩放点或鼠标光标处。
缩放和平移在draw函数中由 x、y 和缩放值执行，因此必须直接修改这些值（不能直接在画布上运行平移）。这是Codepen。
let canvas, circles;
const controls = {
view: {
x: 0,
y: 0,
zoom: 1
},
viewPos: {
prevX: null,
prevY: null,
isDragging: false
},
}
function setup() {
canvas = createCanvas(window.innerWidth, window.innerHeight);
canvas.mouseWheel(e => Controls.zoom(controls).worldZoom(e))
circles = Circle.create(100)
}
function draw() {
background(100)
translate(controls.view.x, controls.view.y);
scale(controls.view.zoom)
circles.forEach(circle => circle.show());
}
window.mousePressed = e => Controls.move(controls).mousePressed(e) …