javascript - 拖动到不同位置后如何更新图像的 x 和 y 坐标？

Question

我有一个带有图像的 konva Canvas ，我可以在其中将图像添加到 Canvas 并四处拖动它们。图像是可以拖到 Canvas 上的 DOM 元素，如下所示:

{loadImages.map(image => (
  <img id="img" className="img"
  src={image.image}
  width="200"
  height="200"
  onDragStart={(e) => {
    dragUrl.current = e.target.src;}}
/>
))}
    
    <div
        onDrop={(e) => {
          e.preventDefault();
          // register event position
          stageEl.current.setPointersPositions(e);
          // add image
          setImages(
            images.concat([
              {
                ...stageEl.current.getPointerPosition(),
                src: dragUrl.current,
                id: `img${images.length + 1}`
              },
            ])
          );
          socket.emit("canvas-data", [
            {
              ...stageEl.current.getPointerPosition(),
              src: dragUrl.current,
              dataType: "Image"
            },
          ])
        }}
        onDragOver={(e) => {
          e.preventDefault();
        }
        }
      >

每当将图像拖到 Canvas 上时，图像就会添加到名为 images 的数组中。每个图像都有自己的 x 和 y 坐标(取决于图像被拖动的位置)、源(它是什么图像)和 id(每次添加新图像时它都会增长 1。)

下面我有一个 onDragEnd 事件，我想在其中调整当前被拖动图像的 x 和 y 坐标(因此在数组 images 中) onDragEnd 事件:

  const URLImage = ({image}) => {
    const [img] = useImage(image.src);
    return (
      <Image
        image = {img}
        x = {image.x}
        y = {image.y}

        offsetX = {50}
        offsetY = {50}

        width={200}
        height={200}
        draggable
        onDragEnd={e => {
          
        }}

      />
    );
  };

关于如何实现这一点有什么想法吗？

Answer 1

您可以使用 e.target 访问节点的更新属性。,

const URLImage = ({ image, onChange}) => {
    const [img] = useImage(image.src);
    return (
      <Image
        image = {img}
        x = {image.x}
        y = {image.y}
        width={200}
        height={200}
        draggable
        onDragEnd={e => {
          onChange({ x: e.targe.x(), y: e.target.y()})
        }}
      />
    );
};

然后更新您的应用的状态:

<URLImage
  image={image}
  onChange={(newProps) => {
    const newImage = { ...image, ...newProps};
    // copy array of state
    const newImages = images.slice();
    newImages[index] = newImage;
    setImages(newImages);
  }}
/>