如何使用JavaScript缩放点？

我的web项目需要围绕鼠标位置缩放

div

元素作为鼠标旋转时的锚定，我的灵感来自@Tatarize的答案，但我无法准确实现它，它无法围绕鼠标位置缩放和平移，有人能帮我吗

window.onload=function（）{
常数步长=0.05；
常量最大刻度=10；
常数最小刻度=0.01；
const red=document.getElementById（'red'）；
const yellow=red.parentNode；
设标度=1；
yellow.onmouseheel=功能（事件）{
event.preventDefault（）；
让mouseX=event.clientX-yellow.offsetLeft-red.offsetLeft；
让mouseY=event.clientY-yellow.offsetTop-red.offsetTop；
常数系数=事件时间增量/120；
常量刻度=刻度；
比例=比例+步长*系数；
scale=Math.max（最小刻度，数学最小（最大刻度，刻度））；
const scaleChanged=比例-旧比例；
常数offsetX=-（鼠标*缩放更改）；
常量偏移=-（鼠标*缩放更改）；
console.log（offsetX，offsetY）；
red.style.transform='translate（'+offsetX+'px'，+offsetY+'px）'+'scale（'+scale+'）；
}
}

.yellow{
背景颜色：黄色；
宽度：400px；
高度：200px；
}
瑞德先生{
背景色：红色；
宽度：100px；
高度：50px；
}

---

。onmousewheel已被弃用。改用.onwheel

---

另外，onwheel事件没有wheelDelta属性。使用deltaY

。onmousewheel已被弃用。改用.onwheel

---

另外，onwheel事件没有wheelDelta属性。使用deltaY

我的代码更改与缩放点相关的viewbox。您正在根据一些不适合这种情况的数学来移动矩形

其思想是根据比例的变化平移缩放框。您正在更改矩形的位置和位置。也就是说，您需要模拟红色矩形的新位置，就像黄色矩形是视口一样。这意味着当我们放大时，我们在特定比例因子的translateX translateY位置放大。然后，我们需要将缩放点的值转换到正确的场景空间中。然后调整红色矩形的位置，就像它在场景空间中一样

下面是一些更正的代码，尽管我显然遗漏了一些元素。重要的是缺少对translateX-translateY内容的保存。覆盖它，使其最终只保留缩放，并将translateX、translateY内容变回零（当它是视口的相对偏移量时）

在函数代码中，放大矩形将使红色矩形填充整个场景空间

window.onload=function（）{
常数步长=0.05；
常量最大刻度=10；
常数最小刻度=0.01；
const red=document.getElementById（'red'）；
const yellow=document.getElementById（'yellow'）；
const svgArea=document.getElementById（'svgArea'）；
让viewportTranslateX=0；
让viewportTranslateY=0；
让viewportScale=1；
svgArea.onwheel=函数（事件）{
event.preventDefault（）；
log（“鼠标坐标”，event.clientX，event.clientY）；
让zoompointX=（event.clientX+（viewportTranslateX/viewportScale））*viewportScale；
让zoompointY=（event.clientY+（viewportTranslateY/viewportScale））*viewportScale；
log（“缩放点预缩放”、zoompointX、zoompointY）；
常数系数=event.deltaY/120；
const oldScale=视口比例；
视口比例=视口比例*（1+步长*系数）；
viewportScale=Math.max（minu-SCALE，Math.MIN（max-SCALE，viewportScale））；
const scaleChanged=视口比例-旧比例；
const offsetX=-（zoompointX*scaleChanged）；
const offsetY=-（zoompointY*scaleChanged）；
console.log（“scale”、scaleChanged、offsetX、offsetY）；
viewportTranslateX+=偏移量；
viewportTranslateY+=offsetY；
zoompointX=（event.clientX+（viewportTranslateX/viewportScale））*viewportScale；
zoompointY=（event.clientY+（viewportTranslateY/viewportScale））*viewportScale；
log（“zoompoint postzoom”、zoompointX、zoompointY）；
var x=viewportTranslateX；
var y=视口translatey；
var width=（svgArea.getAttribute（“宽度”）*viewportScale）；
变量高度=（svgArea.getAttribute（“高度”）*视口比例）；
setAttribute（“视图框”，x+“”+y+“”+width+“”+height）；
日志（“视口”、x、y、宽度、高度、视口比例）；
}
}

这里给出的我的代码是更改有关缩放点的视图框。您正在根据一些不适合这种情况的数学来移动矩形

其思想是根据比例的变化平移缩放框。您正在更改矩形的位置和位置。也就是说，您需要模拟红色矩形的新位置，就像黄色矩形是视口一样。这意味着当我们放大时，我们在特定比例因子的translateX translateY位置放大。然后，我们需要将缩放点的值转换到正确的场景空间中。然后调整红色矩形的位置，就像它在场景空间中一样

下面是一些更正的代码，尽管我显然遗漏了一些元素。重要的是缺少对translateX-translateY内容的保存。覆盖它，使其最终只保留缩放，并将translateX、translateY内容变回零（当它是视口的相对偏移量时）<