所以我正在尝试重制这个版本(取自并修改自这个帖子)在 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
当光标位于图像右下角时尝试缩放,您会看到问题。
抱歉,请仔细阅读您的问题。问题是变换顺序很重要。您需要交换比例和变换(https://codesandbox.io/s/wonderful-cerf-69doe?file=/src/App.js)。祝你的项目好运
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)