Question

我是React的新手，拖放时遇到了一些麻烦。我试图将图像字段拖到用Konva创建的Canvas中。

目前，我使用经典图像字段以及Canvas和RegularPolygon。这是简化的代码：

Hexagon.js ：

class Hexagon extends React.Component {
    render() { 
        return (
            <RegularPolygon
            x={100}
            y={100}
            radius={40}
            sides={6}
            fill={'red'}
            />
          );
    }
}

export default Hexagon;

App.js ：

function App() {
  return (
    <div className="App">
      <Stage width={window.innerWidth} height={400}>
        <Layer>
          <Hexagon/>
        </Layer>
      </Stage>
      <img src={'https://www.w3schools.com/w3css/img_lights.jpg'} alt={'toto'} draggable/>
    </div>
  );
}

export default App;

我希望能够将我的图像拖放到“画布”中，以便“画布”的背景就是我的图像。拖放后，图像仍保留在原处。

更新：

我尝试了不同的方法，但仍在阻止。这是我想通过事件尝试的方法。

export default class Hexagon extends Component {
    onDragOver = (event) => {
        console.log('OVER')
    }

    render() {
        return (
            <div onDragOver={(event)=>this.onDragOver(event)}>
                <p>TEXT</p>
            </div>
        )
    }
}

我只是创建了一个图像，将其拖动到div中，并在控制台中显示了文本。如何访问图片的属性（例如图片来源）？

将图像拖放到画布中

0 个答案: