javascript - 在 React 中使用鼠标滚轮缩放图像

Question

所以我正在尝试使用 React 中的鼠标滚轮重新制作这个版本的图像缩放（从这篇文章中获取和修改）。

问题是，即使在 React 中使用相同的数学和逻辑，它也不能完美地工作，我不知道为什么。看起来图像没有在光标所在的位置缩放。

这是我的组件：

import React, { useState } from "react";

export default () => {
  const [pos, setPos] = useState({ x: 0, y: 0, scale: 1 });

  const onScroll = (e) => {
    const delta = e.deltaY * -0.01;
    const newScale = pos.scale + delta;

    const ratio = 1 - newScale / pos.scale;

    setPos({
      scale: newScale,
      x: pos.x + (e.clientX - pos.x) * ratio,
      y: pos.y + (e.clientY - pos.y) * ratio,
    });
  };

  return (
    <div onWheelCapture={onScroll}>
      <img
        src="https://source.unsplash.com/random/300x300?sky"
        style={{
          transformOrigin: "0 0",
          transform: `scale(${pos.scale}) translate(${pos.x}px, ${pos.y}px)`,
        }}
      />
    </div>
  );
};

我做了一个 CodeSandbox： https ://codesandbox.io/s/lingering-breeze-ho4do?file=/src/App.js

尝试在光标位于图像右下角时进行缩放，您会看到问题。

标签： javascriptreactjs

Answer 1

抱歉，请仔细阅读您的问题。问题是转换顺序问题。您需要交换比例和转换（https://codesandbox.io/s/wonderful-cerf-69doe?file=/src/App.js）。祝你的项目好运。