从第二个开始绘制时居中并放大一个点 canvas

Question

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

我正在为我的 canvas 开发居中和缩放功能。当用户点击屏幕时，点击点应该移动到中心并放大。

我有两个 canvas。第一个 canvas 在屏幕上呈现并显示第二个 canvas 的一部分。第二个 canvas 不是真正的“OffscreenCanvas”，而是仅存储在内存中。

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

由于让“屏幕外 canvas”保持不变可能是个好主意，我正在尝试将所有更改应用到屏幕上 canvas。平移很简单，但是如何结合平移和缩放？

在目前的代码中，缩放是通过缩小视口的大小（viewportWidth or Height -= viewportWidth or 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

从第二个开始绘制时居中并放大一个点 canvas

Center and zoom in on a point when drawing from a second canvas

javascript

canvas

zooming

pan