konvajs - React Konva 在拖动时更改 zIndex

Question

嘿，我有一些用 React konva 编写的拖放游戏。我的可拖动部分如下所示(为方便起见，进行了简化

   return this.props.areas.map((area) => 
        <Image draggable=true 
            {...area.imageProps} 
            onDragStart={() => {...}} 
            onDragEnd={() => {...}} 
            onDragMove={() => {...}}/> ) 

我希望当前被拖动的部分是最高层(最高 zIndex)上的部分。

问题是 React-Konva 不支持 zIndexing，并且似乎希望您根据渲染方法中的顺序强制执行 zIndexing。

我的解决方案是用 currentDragIndex 更新reactState

 ...<Image 
    onDragStart = {this.setState({currentDragIndex: area.index})} 
     />

然后我尝试在渲染方法中重新排序。然而，这会导致拖动事件被中断。

大家有什么好的办法解决这个问题吗？

Answer 1

你应该只使用 moveToTop() 方法

 onDragStart={(el) => {el.target.moveToTop();}}