React/Next.js，以艱難的方式平移SVG-有解無憂

試圖在這里做一個互動式平面圖。已經看到了一些答案，大多數人轉向 D3.js - 如果問題無法解決，也會這樣做。

這給了我一些開始寫作的指導 https://codepen.io/Mamboleoo/pen/dmjYpR/

我現在擁有的代碼：

const Scheme1 = function (){
  const svg = useRef(null);
  const [isPanning, setIsPanning] = useState(false);
  const [cursorPos, setCursorPos] = useState({ x:0, y:0 });
  const [newSVGPos, setNewSVGPos] = useState({ x:0, y:0 });
  const [SVGViewbox, setSVGViewbox] = useState({ x:0, y:0, width:2472.3, height: 1467.24 });

  let startPanSVG = (e) => {
    setIsPanning(true);
    setCursorPos({ x:e.clientX, y:e.clientY });
  }

  let panSVG = (e) => {
    if(!isPanning) {
      return;
    }

    e.stopPropagation();
    e.preventDefault();
    let SVGDimensions = e.target.getBoundingClientRect();
    let ratio = SVGViewbox.width/SVGDimensions.width;
    let newX = SVGViewbox.x - ((e.clientX - cursorPos.x) * ratio);
    let newY = SVGViewbox.y - ((e.clientY - cursorPos.y) * ratio);
    setNewSVGPos({ x:newX, y:newY });
  }

  let stopPanSVG = () => {
    setIsPanning(false);
    setSVGViewbox({ ...SVGViewbox, x:newSVGPos.x, y:newSVGPos.y });
  }

  return (
    <svg ref={svg} viewBox={Object.values(SVGViewbox).join(" ")} onPointerDown={startPanSVG} onPointerMove={panSVG} onPointerLeave={stopPanSVG} onPointerUp={stopPanSVG} version="1.1" id="svg1003">
    ...
    </svg>
)}

主要問題是 SVG 在平移程序中不會被滑鼠拖動，并且只有在完成后stopPanSVG才會進行相當苛刻的移動。可能是因為useState分別是異步和觸發，或者對重新渲染有限制？嘗試用它替換它useEffect并不太順利 - 理想情況下我希望它在里面startPanSVG，所以它只觸發事件，但這違反了鉤子的規則。用鉤子包裝所述函式會導致e.clientX未定義，即使以'？'為前綴或跳過初始安裝也是如此。

也許有更好的選擇？可能應該添加window//由于專案設定而被禁用 -document例如，不能。globaladdEventListener

uj5u.com熱心網友回復：

我相信這應該可以解決您的問題：

let panSVG = (e) => {
  if(!isPanning) {
    return;
  }

  e.stopPropagation();
  e.preventDefault();

  let SVGDimensions = e.target.getBoundingClientRect();
  let ratio = SVGViewbox.width/SVGDimensions.width;
  let newX = SVGViewbox.x - ((e.clientX - cursorPos.x) * ratio);
  let newY = SVGViewbox.y - ((e.clientY - cursorPos.y) * ratio);

  // change the viewport here
  setSVGViewbox({ ...SVGViewbox, x: newX, y: newY });
}

let stopPanSVG = () => {
  setIsPanning(false);
  // don't change viewport here
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/475344.html

標籤：反应 svg

上一篇：SVG周圍的文字

下一篇：盡管有預防性設定，但當寬度大于高度時，SVG縱橫比會被保留