我有一個 SVG HTML 元素，我已經使用滑鼠實作了平移和縮放。縮放功能的當前實作只是將元素的原始寬度和高度乘以一個數字，該數字在用戶滾動滑鼠時會發生變化。
此實作保留原點 (0,0)，并且所有其他點似乎會根據縮放的方向移近/遠離它。
直觀地基于
a的偏移量（min-x和min-y；繪制的綠色）是絕對的，viewBox不依賴于 的width和height。viewBox相對于 SVG 元素的滑鼠坐標（用黑色繪制的坐標，用紅色繪制的 SVG 元素）是相對于viewBox. 如果我放大viewBox，那么我可以在其中看到的圖片部分會縮小，滑鼠繪制的 100px 線將覆寫更多的影像。
如果我們將 的尺寸設定為viewBox與 SVG 元素的尺寸（初始狀態）相同，我們在影像和viewBox（紅色矩形將覆寫整個影像，黑色邊框）。當我們viewBox縮小時，我們不會將整個影像放入其中，因此影像會顯得更大。
如果我們想計算滑鼠相對于整個影像的絕對位置，我們可以這樣做（對于 Y 也是如此）：（
position = offsetX zoomFactor * mouseX相mouseX對于 SVG 元素）。
當我們縮放時，我們改變了因子，但不改變滑鼠的位置。如果我們希望滑鼠下的絕對位置保持不變，我們必須求解以下方程組：
oldPosition = oldOffsetX oldZoomFactor * mouseX
newPosition = newOffsetX newZoomFactor * mouseX
oldPosition = newPosition
我們知道滑鼠位置、縮放因子和舊的偏移量，因此我們求解新的偏移量并得到：
newOffsetX = oldOffsetX mouseX * (oldZoomFactor - newZoomFactor)
這是最終公式，與此答案非常相似。
放在一起，我們得到了最終的作業解決方案：
processMouseScroll(event: WheelEvent) {
const oldZoomFactor = zoomFactor(this.scroll);
const newZoomFactor = zoomFactor(this.scroll event.deltaY);
// mouse position relative to the SVG element
const mouseX = event.pageX - (event.target as SVGElement).getBoundingClientRect().x;
const mouseY = event.pageY - (event.target as SVGElement).getBoundingClientRect().y;
this.scroll = this.scroll event.deltaY;
this.offsetX = this.offsetX mouseX * (oldZoomFactor - newZoomFactor);
this.offsetY = this.offsetY mouseY * (oldZoomFactor - newZoomFactor);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/516154.html
標籤：htmlsvg缩放视框
上一篇：進出SVG湍流過濾器