इसलिए मैं इस संस्करण का रीमेक बनाने का प्रयास कर रहा हूं (यह पोस्ट) रिएक्ट में माउस व्हील का उपयोग करके इमेज जूम का।

बात यह है कि प्रतिक्रिया में समान गणित और तर्क के साथ भी, यह पूरी तरह से काम नहीं करता है और मुझे नहीं पता कि क्यों। ऐसा लगता है कि छवि ज़ूम नहीं करती है जहाँ कर्सर है।

यहाँ मेरा घटक है:

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>
  );
};

मैंने एक कोडसैंडबॉक्स बनाया: https://codesandbox.io/s/lingering-breeze -ho4do?file=/src/App.js

जब आपका कर्सर छवि के नीचे दाईं ओर हो, तो ज़ूम करने का प्रयास करें, आपको समस्या दिखाई देगी।

1
Anatole Lucet 16 अक्टूबर 2020, 12:54

1 उत्तर

सबसे बढ़िया उत्तर

क्षमा करें, अपने प्रश्न को थोड़ा और ध्यान से पढ़ें। मुद्दा है ट्रांसफॉर्म ऑर्डर मायने रखता है। आपको पैमाने पर अदला-बदली करनी होगी और रूपांतरण करना होगा (https:// codesandbox.io/s/wonderful-cerf-69doe?file=/src/App.js)। आपकी परियोजना के साथ शुभकामनाएँ ।

1
atomictom 16 अक्टूबर 2020, 19:05