图像没有通过 socket.io 添加到画布上？

如何解决图像没有通过 socket.io 添加到画布上？

嗨，我正在使用 Konva 构建一个协作白板应用程序。我想在画布上拖动图像，并将其显示给连接到应用程序的其他客户端。我试过做一些事情，但它并没有真正起作用.. 这是我想要做的：

{loadImages.map(image => (
  <img id="img" className="img"
  src={image.picture}
  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,},])
          );
          socket.emit("canvas-data",[
            {
              ...stageEl.current.getPointerPosition(),])
        }}
        onDragOver={(e) => 
          e.preventDefault()
        }
      >

当图像被丢弃时，图像数据被发送到套接字服务器。图像数据的示例如下：

[ { x: 457.90001572844375,y: 126.92498779296875,src: 'http://localhost:3000/images/kitten.jpg' } ]

然后在这里接收图像数据：

socket.on("canvas-data",function(data){
      var interval = setInterval(function(){
        clearInterval(interval);
       
        var stageData = JSON.parse(JSON.stringify(data));
        console.log(stageData[0].x);
        var layer = new Konva.Layer();
        var image = new Konva.Image(
        {
          x: stageData[0].x,y: stageData[0].y,src: stageData[0].src
        
        })
      layer.add(image);
      stageEl.current.add(layer);
  
    
  
      })
    },200)

为什么其他客户端上仍然没有显示已删除的图像？

解决方法

Konva.Image 没有 src 属性。为了在画布上显示图像，您需要先加载它。

查看 Konva Image Tutorial 或 react-konva Image