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

Question

所以我正在尝试重拍this version (取自 this post 并进行修改)在 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

当光标位于图像右下角时尝试缩放，您会发现问题。

Answer 1

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