从第二个画布绘制时，将点居中并放大

Question

更新：我找到了自己问题的解决方案。请参阅下面的答案

我正在为我的画布设计一个居中和缩放功能。当用户点击屏幕时，点击的点应该移动到中心并放大。

我有两幅油画。第一个画布在屏幕上呈现，并显示第二个画布的一部分。第二幅画布不是真正的"；offscreenCnvas"而是仅存储在存储器中。

平移和缩放是使用requestAnimationFrame增量完成的。

因为这可能是一个好主意；屏幕外画布"；保持不变，我正在尝试将所有更改应用到屏幕画布上。平移很简单，但是如何将平移和缩放结合起来呢？

在当前代码中，缩放是通过缩小视口的大小来实现的(viewportWidth或Height-=viewportWidth或Height*0.01(。然后，我通过比其他情况下平移得更远来补偿较小的视口(+viewportWidth或Height*0.01*0.5(。

[！[解释平移和缩放问题的图像][1]][1]

然而，使用此解决方案，屏幕将集中在用户单击的位置左侧的一个点上。你能告诉我我做错了什么吗？

或者，如果有更好的方法，我会很高兴听到它。

这就是我到目前为止所想到的：

// Global variables:
onscreenCanvas
offscreenCanvas
viewportPositionX
viewportPositionY
viewportWidth
viewportHeight
document.addEventListener('click', (event) => {
let counter = 0
// Distance from clicked point to center of screen:
let panX = -(window.innerWidth/2 - event.pageX)
let panY = -(window.innerHeight/2 - event.pageY)
function panAndZoom() {
// Pan one percent of the distance:
viewportPositionX += panX * 0.01
viewportPositionY += panY * 0.01
let ctx = onscreenCanvas.getContext('2d')
ctx.drawImage(
offscreenCanvas,
viewportPositionX + viewportWidth * 0.01 * 0.5,
viewportPositionY + viewportHeight * 0.01 * 0.5,
viewportWidth - viewportWidth * 0.01,
viewportHeight - viewportHeight * 0.01,
0,
0,
window.innerWidth,
window.innerHeight)
// Shrink viewport by one percent:
viewportWidth -= viewportWidth * 0.01
viewportHeight -= viewportHeight * 0.01
counter++
if (counter <= 100) {
window.requestAnimationFrame(panAndZoom)
}
}
panAndZoom()
})

[1]: https://i.stack.imgur.com/b9DR7.png

Answer 1

好的，所以我找到了一个解决方案。我不应该每次重画都减小视口的大小，而应该增加缩放的大小。

let scaleX = viewportWidth * 0.005
let scaleY = viewportHeight * 0.005
[...]
ctx.drawImage(
offscreenCanvas,
viewportPositionX + scaleX * 0.5,
viewportPositionY + scaleY * 0.5,
viewportWidth - scaleX,
viewportHeight - scaleY,
0,
0,
window.innerWidth,
window.innerHeight)
scaleX += viewportWidth * 0.005
scaleY += viewportHeight * 0.005