next.js 有没有可能优化这个公式？

2g32fytz 于 2023-04-05 发布在其他

关注(0)|答案(1)|浏览(136)

给定的公式根据鼠标移动来排列容器的内容。问题在于图像的大小，并且事实上，沿着x和y轴从不同的侧面接近，排列的计算方式不同。

const zoomEffect = (event: any) => {
    setZoomMode(true);
    const xa = event.pageX-containerRef.current.offsetLeft;
    const xb = containerRef.current.offsetWidth;
    const xc = zoomRef.current?.getBoundingClientRect().width;
    const ya = event.pageY-containerRef.current.offsetTop;
    const yb = containerRef.current.offsetHeight;
    const yc = zoomRef.current?.getBoundingClientRect().height;
    setMouseCoords({
      x: xc ? -(xa)/(xb/((xc)-xb)) : 0,
      y: yc ? -(ya)/(yb/((yc)-yb)) : 0,
    });
  };

<div ref={conteinerRef} onMouseMove={zoomEffect}>
  <div style={{
    left: mouseCoords.x,
    top: mouseCoords.y,
  }}>
    <Img ref_={zoomRef} />
  </div>}
</div>

next.js

来源：https://stackoverflow.com/questions/75940089/is-it-possible-to-optimize-this-formula

1条答案

按热度按时间

klr1opcd1#

我不知道公式的正确性，这取决于你，但我发现它非常混乱和复杂的所有这些2字母变量。
我会这样写

const zoomEffect = (event: any) => {
  setZoomMode(true);

  const { offsetLeft, offsetTop, offsetWidth, offsetHeight } = conteinerRef.current;
  const { width = 0, height = 0 } = zoomRef.current?.getBoundingClientRect() || {};

  setMouseCoords({
    x: width ? (offsetLeft - event.pageX) * (width - offsetWidth) / offsetWidth : 0,
    y: height ? (offsetTop - event.pageY) * (height - offsetHeight) / offsetHeight : 0
  });
};

变形，我是如何从你的形态变成我的。

((xc)-xb) === (xc-xb)
a/(b/c) === a*c/b
-(xa)和xa === a-b-〉-xa === b-a或(containerRef.current.offsetLeft - event.pageX)

赞(0）回复(0）举报 2023-04-05

我来回答

next.js 有没有可能优化这个公式？

1条答案

相关问题

热门标签

最新问答