小编Luc*_*ozo的帖子

我正在尝试使用 WebGL （更具体地说，是 regl）创建 2D 图形可视化。通过我当前的实现，我已经可以看到力布局应用于每个节点，这很好。当我尝试相对于当前鼠标位置进行缩放时，问题就出现了。根据我的研究，要实现这种行为，需要按以下顺序应用矩阵变换：

translate(nodePosition, mousePosition)
scale(scaleFactor)
translate(nodePosition, -mousePosition)

因此，每次wheel触发事件时，都会重新计算鼠标位置，并使用新的鼠标位置信息更新变换矩阵。目前的行为很奇怪，我似乎不明白出了什么问题。这是一个活生生的例子。

显然，如果我将鼠标固定在初始位置进行放大和缩小，一切都会正常工作。但是，如果我移动鼠标并尝试将焦点集中在另一个节点上，则会失败。

检索鼠标位置的函数是：

const getMousePosition = (event) => {
    var canvas = event.currentTarget
    var rect = canvas.getBoundingClientRect()
    var x = event.clientX - rect.left
    var y = event.clientY - rect.top
    var projection = mat3.create()
    var pos = vec2.fromValues(x,y)
    // this converts the mouse coordinates from 
    // pixel space to WebGL clipspace
    mat3.projection(projection, canvas.clientWidth, canvas.clientHeight)
    vec2.transformMat3(pos, pos, projection)
    return(pos)
}

事件wheel监听回调：

var zoomFactor = 1.0 …