将图像拖放到矩形中

Question

我想显示矩形周围区域的所有 5 张图像，并使用 React-Draggable 使它们可拖动，但即使我通过状态映射并尝试通过 url 向下图像组件。我哪里错了？如何显示 canvas 周围的图像？

import React, { Component } from "react";
import Draggable from "react-draggable";
import axios from "axios";
import "./App.css";
import Images from "./Images";
export default class App extends Component {
  constructor(props) {
    super(props);
    this.toggleAspect = this.toggleAspect.bind(this);
    this.state = {
      activeDrags: 0,
      deltaPosition: {
        x: 0,
        y: 0
      },
      controlledPosition: {
        x: -400,
        y: 200
      },
      urlImages: null,
      toggleDefault: true
    };
  }

  async componentDidMount() {
    const res = await axios.get("https://picsum.photos/v2/list?limit=5");
    this.setState({ urlImages: res.data });
    this.state.urlImages.map(data =>
      console.log("urlImage\t" + data.download_url)
    );
  }

  toggleAspect() {
    const currentState = this.state.toggleDefault;
    this.setState({ toggleDefault: !currentState });
  }
  handleDrag = (e, ui) => {
    const { x, y } = this.state.deltaPosition;
    this.setState({
      deltaPosition: {
        x: x + ui.deltaX,
        y: y + ui.deltaY
      }
    });
  };

  onStart = () => {
    this.setState({ activeDrags: ++this.state.activeDrags });
  };

  onStop = () => {
    this.setState({ activeDrags: --this.state.activeDrags });
  };

  // For controlled component
  adjustXPos = e => {
    e.preventDefault();
    e.stopPropagation();
    const { x, y } = this.state.controlledPosition;
    this.setState({ controlledPosition: { x: x - 10, y } });
  };

  adjustYPos = e => {
    e.preventDefault();
    e.stopPropagation();
    const { controlledPosition } = this.state;
    const { x, y } = controlledPosition;
    this.setState({ controlledPosition: { x, y: y - 10 } });
  };

  onControlledDrag = (e, position) => {
    const { x, y } = position;
    this.setState({ controlledPosition: { x, y } });
  };

  onControlledDragStop = (e, position) => {
    this.onControlledDrag(e, position);
    this.onStop();
  };

  render() {
    const dragHandlers = { onStart: this.onStart, onStop: this.onStop };
    const { deltaPosition, controlledPosition } = this.state;
    return (
      <div>
        <h1>React Draggable</h1>
        <p>Active DragHandlers: {this.state.activeDrags}</p>
        <p>
          <a href="https://github.com/STRML/react-draggable/blob/master/example/example.js">
            Demo Source
          </a>
        </p>
        <button onClick={this.toggleAspect}>Toggle Aspect Ratio</button>
        <canvas
          className={` ${
            this.state.toggleDefault ? "canvasFrame" : "canvasFrame-2"
          }`}
        />
        <Draggable>
          {/* urlImages.map((data)=>  problem
            <Images
            url={data.download_url}
            />
          ) */}
          <div
            className="box"
            style={{ position: "absolute", bottom: "100px", right: "100px" }}
          >
            I already have an absolute position.
          </div>
        </Draggable>
      </div>
    );
  }
}

Answer 1

tldr 需要进行一些更改；这是工作 link,

https://codesandbox.io/s/unruffled-bogdan-x98ff

图像稍作更改，react-draggable 在其文档中提到的一件事是组件必须接受一些传递下来的属性。 link to docs

图像组件的示例现在进行说明。

import React from "react";

const Images = ({
  download_url,
  className,
  style,
  onMouseDown,
  onMouseUp,
  onTouchStart,
  onTouchEnd
}) => {
  return (
    <img
      onMouseDown={onMouseDown}
      onMouseUp={onMouseUp}
      onTouchStart={onTouchStart}
      onTouchEnd={onTouchEnd}
      className={className}
      style={style}
      src={download_url}
      alt="photos"
      width="50px"
      height="50px"
    />
  );
};
export default Images;

我把它写得过于冗长而不是展开，这样您就可以看到所需的属性。

在App.js我做了这些改动，首先是在这里设置状态

  async componentDidMount() {
    const res = await axios.get("https://picsum.photos/v2/list?limit=5");
    const urlImages = [...res.data];
    this.setState({ urlImages });
  }

以及图像的实际渲染

    {urlImages.map(data => (
      <Draggable>
        <Images key={data.id} download_url={data.download_url} />
      </Draggable>
    ))}

这会在页面上获取图像并且它们是可拖动的，我个人从未使用过 react-draggable 所以我确信可以进行一些改进以使它们更平滑等。但是这个希望能为您指明正确的方向。

将图像拖放到矩形中

image drag and drop into the rectangle

javascript

css

canvas

draggable

reactjs