javascript 一维缩放到点

xriantvc  于 2023-04-04  发布在  Java
关注(0)|答案(2)|浏览(152)

我正在用JavaScript构建一个ticker,并希望实现缩放到光标。我有一个平移值和缩放因子。我想出了以下代码来给出当前平移的新平移值,要缩放的点,以及新旧缩放值。

const panFromZoom = (pan, point, oldZoom, newZoom) => {
  return pan + point / newZoom - point / oldZoom;
};

这对于point保持固定在某个值的情况下非常有效。当在主动放大或缩小时移动点时,会导致意外的行为。我可以对这个公式进行哪些更改才能使它工作?

6ju8rftf

6ju8rftf1#

要根据缩放因子和要缩放到的点的位置来调整平移值,您需要考虑该点与视口中心之间的距离。请尝试此操作。

const panFromZoom = (pan, point, oldZoom, newZoom, viewportWidth, viewportHeight) => {
  const dx = point.x - viewportWidth / 2;
  const dy = point.y - viewportHeight / 2;
  const newDx = dx / oldZoom * newZoom;
  const newDy = dy / oldZoom * newZoom;
  const newPanX = point.x - newDx;
  const newPanY = point.y - newDy;
  return {
    x: newPanX,
    y: newPanY
  };
};
rjzwgtxy

rjzwgtxy2#

解决了这个问题。自动收报机以秒为单位查看时间,所以我的推理方式是,我希望相同的像素(枢轴点)对应于相同的秒值。下面的工作结束了。

const panFromZoom = (pan, point, oldZoom, newZoom) => {
  const fac = newZoom / oldZoom;
  return point / fac + pan / fac - point;
}

这个公式所做的是通过规范化点变换规范化的平移,然后使用非规范化点将其移回。

相关问题