在容器内的页面上移动 svg 元素

Question

我有一个项目可以让您将文本元素放置到 SVG 上。放置该元素后，我希望它可以拖动，以便可以重新定位。目前，我可以放置文本元素，并且可以对其进行编辑，但是，当我移动它时，这就是我遇到问题的地方。目前，问题是当我单击并移动文本元素时，它会移动。但是当我释放并再次单击时，元素将始终自行移动到同一个位置。当我点击它时，它会完全离开页面。

我已经查看并尝试了几种不同的想法，包括这些来源：

https://dev.to/tvanantwerp/dragging-svgs-with-react-38h6

http://www.petercollingridge.co.uk/tutorials/svg/interactive/dragging/

我相信，这与鼠标点击根据整个页面读取的事实有关，但我需要它是特定区域。

这是我的具有 SVG 的画布元素：

import React, { useState } from "react";

const SvgCanvas = (props) => {
  const [Dragging, setDragging] = useState(false);
  const [origin, setOrigin] = useState({ x: 0, y: 0 });
  const [coordinates, setCoordinates] = useState({ x: 20, y: 20 });

  const DragClick = (e) => {
    console.log(e.target.attributes);
    e.preventDefault();
    setDragging(true);
    setOrigin({ x: e.clientX, y: e.clientY });
  };
  const DragMove = (e) => {

    e.preventDefault();
    if (Dragging) {
      // var x = parseFloat(e.target.getAttributeNS(null,"x"))
      // console.log(x)
      // e.target.setAttributeNS(null,"x",x+.1);
      console.log("Origin= X: "+origin.x+", Y: "+origin.y);
    console.log("Current= X: "+e.clientX+", Y: "+e.clientY);
     setCoordinates({ x: e.clientX - origin.x, y: e.clientY = origin.y });
    }
  };
  const DragRelease = (e) => {
    e.preventDefault();
    setDragging(false);
  };
  var lnk = props.details.url;
  const TextBoxArray = [];
  for (var i = 0; i < props.details.box_count; i++) {
    //console.log("for");
    //console.log(props.Meme[i]);
    const y = '20';
    const x = '30';
    TextBoxArray.push(
      <text
        key={i}
        id={"MemeBox" + i}
        //y={`${coordinates.y}`}
        // x={`${coordinates.x}`}
        transform={`translate(${coordinates.x}, ${coordinates.y})`}
        fontSize={props.Meme[i] ? props.Meme[i].range : "16"}
        fill={props.Meme[i] ? props.Meme[i].color : "black"}
        onMouseDown={(e) => DragClick(e)}
        onMouseMove={(e) => DragMove(e)}
        onMouseUp={(e) => DragRelease(e)}
      >
        {props.Meme[i]
          ? (document.getElementById("MemeBox" + i).textContent =
              props.Meme[i].text)
          : null}
      </text>
    );
  }

  return (
    <div id="SvgCanvas">
      <svg>
        <image key={props.details.id} x="10" y="10" href={lnk} />
        {TextBoxArray}
      </svg>
    </div>
  );
};
export default SvgCanvas;

还有，app.js 文件

import React, { useState} from "react";
import ReactDom from 'react-dom';
import SvgControls from "./components/svgcontrols";
import SvgCanvas from "./components/svgcanvas";
import MemeChooser from "./components/selector";
import "./style/meme.css";

function App() {


  const [Meme, setMeme] = useState([]);
  const [MemeText, setMemeText] = useState([]);
  const MemeSet = (e) => {
    setMeme(e);
  };
  const TextSet = (MemeEditArray, InitialArraySetFlag) => {
    if (!InitialArraySetFlag) {
      setMemeText(MemeEditArray);
    }
    if (InitialArraySetFlag) {
      var MemeEditArrayCopy = [...MemeText];
      MemeEditArrayCopy[MemeEditArray["id"]] = MemeEditArray;
      setMemeText(MemeEditArrayCopy);
    }

  };

  return (
    <div className="App">
      <header>Meme Maker</header>
      <div id="MemeMaker">
        <SvgCanvas Meme={MemeText} details={Meme} />
        <SvgControls getter={MemeText} setter={TextSet} details={Meme} Create={document.getElementsByName(SvgCanvas)} />
        <MemeChooser click={MemeSet} />
        {
        //console.log(ReactDom.findDOMNode(this).querySelector(SvgCanvas))
        }


      </div>
    </div>
  );
}

export default App;

感谢任何建议，您可能需要帮助我解决此问题。

Answer 1

所以过了一段时间，我能够为我的问题想出一个解决方案。我所做的是添加一个起始变量，然后对其进行调整。

const DragMove = (e) => {

    e.preventDefault();
    if (Dragging) {
      // var x = parseFloat(e.target.getAttributeNS(null,"x"))
      // console.log(x)
      // e.target.setAttributeNS(null,"x",x+.1);
      console.log("Origin= X: "+origin.x+", Y: "+origin.y);
    console.log("Current= X: "+e.clientX+", Y: "+e.clientY);
     setCoordinates({ x: e.clientX - origin.x, y: e.clientY = origin.y });
    }
  };

问题是当我根据点击位置改变坐标时，我没有调整文本的初始位置。

const [Dragging, setDragging] = useState(false);
  const [origin, setOrigin] = useState({ x: 0, y: 0 });
  const [coordinates, setCoordinates] = useState({ x: 20, y: 20 });

  const DragClick = (e) => {
    console.log(e.target.attributes);
    e.preventDefault();
    setDragging(true);
    setOrigin({ x: e.clientX, y: e.clientY });
  };
  const DragMove = (e) => {
    e.preventDefault();
    var startX = coordinates.x;
    var startY = coordinates.y;
    if (Dragging) {
      setCoordinates({
        x: startX + e.clientX - origin.x,
        y: startY + e.clientY - origin.y,
      });
    }
  };