從第二個 canvas 繪圖時居中並放大一點

Question

更新：我找到了解決我自己問題的方法。 請參閱下面的答案。

我正在為我的 canvas 開發中心和縮放功能。 當用戶點擊屏幕時，點擊的點應該移動到中心並放大。

我有兩張畫布。 第一個 canvas 在屏幕上呈現並顯示第二個 canvas 的一部分。 第二個 canvas 不是真正的“OffscreenCanvas”，而是僅存儲在 memory 中。

使用 requestAnimationFrame 以增量方式進行平移和縮放。

由於讓“屏幕外畫布”保持不變可能是個好主意，因此我嘗試將所有更改應用於屏幕 canvas。 平移很簡單，但是如何將平移和縮放結合起來呢？

在當前代碼中，縮放是通過縮小視口的大小來實現的（viewportWidth or Height -= viewportWidth or Height * 0.01）。 然后，我通過平移比其他方式（+ viewportWidth 或 Height * 0.01 * 0.5）更遠的位置來補償較小的視口。

[！[解釋我的平移和縮放問題的圖像][1]][1]

但是，使用此解決方案時，屏幕將位於用戶單擊位置左側的某個點上。 你能告訴我我做錯了什么嗎？

或者，如果有更好的方法 go 關於這個，我會很高興聽到它。

到目前為止，這是我想出的：

// 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