0

我一直在使用 react-konva 遇到这个问题，当我在数组中删除一个形状时，所有形状都会移动到初始位置，并且如果该形状位于已删除形状上方的一个位置并且具有相同的组件名称，例如：deleted == =RegularPolygon 和上面的一个===RegularPolygon，比它占用被删除组件的相同位置以及相同的大小和旋转。我尝试将索引更改为删除时的最远位置，并尝试拼接以删除并放置在数组的顶部，但它仍然无法正常工作。使用 strictMode 会使形状在删除时变大，并且不会保持其初始大小。从数组中删除形状时，我只希望所有形状保持相同的位置、大小和旋转，我该怎么做？

代码很大，但这里是相关的块：

家长说：

constructor(props){
    super(props)
    //this.animationDeleteInheritance = React.createRef();
    this.state={
        chosenSelectedCategory:"",
        animations:false,
        chooseColor:"",
        paused:true,
        timerString:"00",
        timer: 0,
        colorPicker:false,
        selectedDestinationID:"",
        selectedRouteID:"",
        selectedElementsID:"",
        selectedType:"",
        elements:[],
        destinations:[],
        routes:[],
        travelers:[],
        konva:false
        //final destination
    }
}

移除元素：

移除元素 = () =>{

    //this.animationDeleteInheritance.current.animationInheritance()
    console.log(this.state.selectedType)
 //  let s=[] 
let r=[]
for(let i = 0; i<this.state.elements.length; i++){
  /*  
   if(this.state.selectedElementsID !=='' && this.state.elements[i].id === this.state.selectedElementsID) 
   {s.push(this.state.elements[i]);
    this.state.elements.splice(i,1);
    this.state.elements.splice(this.state.elements.length,0, s)
    }*/
if(this.state.selectedElementsID !=='' && this.state.elements[i].id !== this.state.selectedElementsID) 
    {r.push(this.state.elements[i])}
  //  console.log( Math.max(...this.state.routes[i].id))


}

舞台层：

<div class="designScreen"  >

<Stage

width={window.innerWidth*4/5}
height={window.innerHeight*8.65/10}
onClick={this.getKonvaChildren}
onMouseDown={this.activateRouteTrigger} onMouseUp={this.deactivateRouteTrigger}  onDragMove={this.updateRoute}
>

<Layer onClick={this.getKonvaChildren}

>


{
                  this.state.elements.map((el) => {
                    return <Content id={el.id}
                                    element={el.element}
                                    color={el.color}
                                    title={el.title}
                                    type={el.type}
                                    rY={el.rY}
                                    rX={el.rX}
                                    sX={el.sX}
                                    sY={el.sY}
                                    zIndex={el.zIndex}
                                    konvaTrigger={this.konvaTrigger}
                                    elements={this.state.elements}
                                    visibilityStatus={el.visibilityStatus}
                                    selectType={this.selectType}
                                    parentCallback = {this.selectDestinations}
                                    selectedDestinationID = {this.state.selectedDestinationID}
                                    destinations={this.state.destinations}
                                    parentCallbackColor = {this.changeColorSelector}
                                    timerString={this.state.timerString}
                                    elementsID={this.selectElements}
                                    selectedRouteID={this.state.selectedRouteID}
                                    selectedElementsID={this.state.selectedElementsID}
                                    selectedRouteIDParentCallback={this.updateselectedRouteID}
                                    updateRouteX={this.updateRouteX}
                                    updateRouteY={this.updateRouteY}
                                    updateRoutePosition={this.updateRoutePosition}



                    /> 

                  })
              }  





</Layer>
</Stage>
</div>

子组件渲染并返回：

render(){





const polygon=  this.props.id===this.props.selectedElementsID ?  <Group zIndex={this.props.zIndex} onMouseDown={this.parentsCallBacks} onMouseUp={this.parentsCallBacks} onClick={this.parentsCallBacks} >
<RegularPolygon
id="konva"


    pointerLength={20} 
   draggable="true"
pointerWidth={20} 

x= {300}
y= {200}
width={60}
height={90}
ref={node => {
    this.polygon = node;

  }}
sides= {6} //3 for Triangle

fill= {this.props.color}
//stroke= 'black'
//strokeWidth= {4}
visible={this.props.visibilityStatus===false ? false :true}

dragBoundFunc={ pos=> {
    var Ylimit=pos.y > window.innerHeight*8.65/10 ? window.innerHeight*8.65/10 : pos.y
    var Xlimit=pos.x > window.innerWidth*4/5 ? window.innerWidth*4/5 : pos.x
    return {
      x: pos.x,
      y: pos.y
    };}
  }

/>
<Transformer
        ref={node => {
          this.transformer = node;
        }}
      />

</Group>
:
<Group zIndex={this.props.zIndex} onMouseDown={this.parentsCallBacks} onMouseUp={this.parentsCallBacks} onClick={this.parentsCallBacks} >
<RegularPolygon
id="konva"


    pointerLength={20} 
   draggable="true"
pointerWidth={20} 

x= {300}
y= {200}
width={60}
height={90}

sides= {6} //3 for Triangle

fill= {this.props.color}
//stroke= 'black'
//strokeWidth= {4}
visible={this.props.visibilityStatus===false ? false :true}

dragBoundFunc={ pos=> {
    var Ylimit=pos.y > window.innerHeight*8.65/10 ? window.innerHeight*8.65/10 : pos.y
    var Xlimit=pos.x > window.innerWidth*4/5 ? window.innerWidth*4/5 : pos.x
    return {
      x: pos.x,
      y: pos.y
    };}
  }

/>
</Group>


const triangle=  this.props.id===this.props.selectedElementsID ?  <Group zIndex={this.props.zIndex} onMouseDown={this.parentsCallBacks} onMouseUp={this.parentsCallBacks} onClick={this.parentsCallBacks} >
<RegularPolygon
id="konva"
ref={node => {
    this.polygon = node;
  }}

    pointerLength={20} 
   draggable="true"
pointerWidth={20} 

x= {300}
y= {200}
width={60}
height={90}

sides= {3} //3 for Triangle

fill= {this.props.color}
//stroke= 'black'
//strokeWidth= {4}
visible={this.props.visibilityStatus===false ? false :true}
dragBoundFunc={ pos=> {
    var Ylimit=pos.y > window.innerHeight*8.65/10 ? window.innerHeight*8.65/10 : pos.y
    var Xlimit=pos.x > window.innerWidth*4/5 ? window.innerWidth*4/5 : pos.x
    return {
      x: pos.x,
      y: pos.y
    };}
  }

/>
<Transformer
        ref={node => {
          this.transformer = node;
        }}
      />

</Group>
:
<Group zIndex={this.props.zIndex} onMouseDown={this.parentsCallBacks} onMouseUp={this.parentsCallBacks} onClick={this.parentsCallBacks} >
<RegularPolygon
id="konva"


    pointerLength={20} 
   draggable="true"
pointerWidth={20} 

x= {300}
y= {200}
width={60}
height={90}

sides= {3} //3 for Triangle

fill= {this.props.color}
//stroke= 'black'
//strokeWidth= {4}
visible={this.props.visibilityStatus===false ? false :true}
dragBoundFunc={ pos=> {
    var Ylimit=pos.y > window.innerHeight*8.65/10 ? window.innerHeight*8.65/10 : pos.y
    var Xlimit=pos.x > window.innerWidth*4/5 ? window.innerWidth*4/5 : pos.x
    return {
      x: pos.x,
      y: pos.y
    };}
  }

/>


</Group>

const rectangle=  this.props.id===this.props.selectedElementsID ?  <Group zIndex={this.props.zIndex} onMouseDown={this.parentsCallBacks} onMouseUp={this.parentsCallBacks} onClick={this.parentsCallBacks} >
<Rect
id="konva"

ref={node => {
    this.polygon = node;
  }}
    pointerLength={20} 
   draggable="true"
pointerWidth={20} 

x= {300}
y= {200}
width={100}
height={60}



fill= {this.props.color}
//stroke= 'black'
//strokeWidth= {4}
visible={this.props.visibilityStatus===false ? false :true}
dragBoundFunc={ pos=> {
    var Ylimit=pos.y > window.innerHeight*8.65/10 ? window.innerHeight*8.65/10 : pos.y
    var Xlimit=pos.x > window.innerWidth*4/5 ? window.innerWidth*4/5 : pos.x
    return {
      x: pos.x,
      y: pos.y
    };}
  }

/>
<Transformer
        ref={node => {
          this.transformer = node;
        }}
      />
</Group>
:
<Group zIndex={this.props.zIndex} onMouseDown={this.parentsCallBacks} onMouseUp={this.parentsCallBacks} onClick={this.parentsCallBacks} >
<Rect
id="konva"


    pointerLength={20} 
   draggable="true"
pointerWidth={20} 

x= {300}
y= {200}
width={100}
height={60}



fill= {this.props.color}
//stroke= 'black'
//strokeWidth= {4}
visible={this.props.visibilityStatus===false ? false :true}
dragBoundFunc={ pos=> {
    var Ylimit=pos.y > window.innerHeight*8.65/10 ? window.innerHeight*8.65/10 : pos.y
    var Xlimit=pos.x > window.innerWidth*4/5 ? window.innerWidth*4/5 : pos.x
    return {
      x: pos.x,
      y: pos.y
    };}
  }

/>

</Group>


const borderRectangle=  this.props.id===this.props.selectedElementsID ?  <Group zIndex={this.props.zIndex} onMouseDown={this.parentsCallBacks} onMouseUp={this.parentsCallBacks} onClick={this.parentsCallBacks} >
<Rect
id="konva"
ref={node => {
    this.polygon = node;
  }}

    pointerLength={20} 
   draggable="true"
pointerWidth={20} 

x= {300}
y= {200}
width={100}
height={60}
cornerRadius= {8}


fill= {this.props.color}
//stroke= 'black'
//strokeWidth= {4}
visible={this.props.visibilityStatus===false ? false :true}
dragBoundFunc={ pos=> {
    var Ylimit=pos.y > window.innerHeight*8.65/10 ? window.innerHeight*8.65/10 : pos.y
    var Xlimit=pos.x > window.innerWidth*4/5 ? window.innerWidth*4/5 : pos.x
    return {
      x: pos.x,
      y: pos.y
    };}
  }

/>
<Transformer
        ref={node => {
          this.transformer = node;
        }}
      />
</Group>
:
<Group zIndex={this.props.zIndex} onMouseDown={this.parentsCallBacks} onMouseUp={this.parentsCallBacks} onClick={this.parentsCallBacks} >
<Rect
id="konva"


    pointerLength={20} 
   draggable="true"
pointerWidth={20} 

x= {300}
y= {200}
width={100}
height={60}
cornerRadius= {8}


fill= {this.props.color}
//stroke= 'black'
//strokeWidth= {4}
visible={this.props.visibilityStatus===false ? false :true}
dragBoundFunc={ pos=> {
    var Ylimit=pos.y > window.innerHeight*8.65/10 ? window.innerHeight*8.65/10 : pos.y
    var Xlimit=pos.x > window.innerWidth*4/5 ? window.innerWidth*4/5 : pos.x
    return {
      x: pos.x,
      y: pos.y
    };}
  }

/>

</Group>

const oval=   this.props.id===this.props.selectedElementsID ? <Group zIndex={this.props.zIndex} onMouseDown={this.parentsCallBacks} onMouseUp={this.parentsCallBacks} onClick={this.parentsCallBacks} >
<Ellipse
id="konva"
ref={node => {
    this.polygon = node;
  }}

   draggable="true"


x= {300}
y= {200}
width={80}
height={80}

fill= {this.props.color}
//stroke= 'black'
//strokeWidth= {40}
visible={this.props.visibilityStatus===false ? false :true}
dragBoundFunc={ pos=> {
    var Ylimit=pos.y > window.innerHeight*8.65/10 ? window.innerHeight*8.65/10 : pos.y
    var Xlimit=pos.x > window.innerWidth*4/5 ? window.innerWidth*4/5 : pos.x
    return {
      x: pos.x,
      y: pos.y
    };}
  }

/>
<Transformer
        ref={node => {
          this.transformer = node;
        }}
      />
</Group>
:
<Group zIndex={this.props.zIndex} onMouseDown={this.parentsCallBacks} onMouseUp={this.parentsCallBacks} onClick={this.parentsCallBacks} >
<Ellipse
id="konva"


   draggable="true"


x= {300}
y= {200}
width={80}
height={80}

fill= {this.props.color}
//stroke= 'black'
//strokeWidth= {40}
visible={this.props.visibilityStatus===false ? false :true}
dragBoundFunc={ pos=> {
    var Ylimit=pos.y > window.innerHeight*8.65/10 ? window.innerHeight*8.65/10 : pos.y
    var Xlimit=pos.x > window.innerWidth*4/5 ? window.innerWidth*4/5 : pos.x
    return {
      x: pos.x,
      y: pos.y
    };}
  }

/>

</Group>


const line=    <Group zIndex={this.props.zIndex} onMouseDown={this.parentsCallBacks} onMouseUp={this.parentsCallBacks} onClick={this.parentsCallBacks}  >

<Line id="konva"  

points={[this.props.rX,this.props.rY,this.props.sX,this.props.sY]} 


visible={this.props.visibilityStatus===false ? false :true}
 fill={`${this.props.color}`} 
stroke={`${this.props.color}`}  
strokeWidth={2.5}
dragBoundFunc={ pos=> {
    var Ylimit=pos.y > window.innerHeight*8.65/10 ? window.innerHeight*8.65/10 : pos.y
    var Xlimit=pos.x > window.innerWidth*70/10 ? window.innerWidth*4/5 : pos.x
    return {
      x: pos.x,
      y: pos.y
    };}
  } />
<Rect 
id="r"
ref={node => {
    this.pointR = node;
  }}

//zIndex={1} 
draggable="true"
cornerRadius= {2}
x={this.props.rX -5}
y={this.props.rY - 5}
 width={10} 
 height={10} 
fill="green"
 visible={this.props.visibilityStatus===false || this.props.selectedElementsID !== this.props.id ? false :true}>
 </Rect>
 <Rect 
   ref={node => {
    this.pointS = node;
  }}
 id="s"
// zIndex={1} 
 draggable="true"

cornerRadius= {2}
x={this.props.sX -5}
y={this.props.sY - 5}
 width={10} 
 height={10} 
 fill="green"
 visible={this.props.visibilityStatus===false || this.props.selectedElementsID !== this.props.id ? false :true}>
 </Rect>
</Group>

const arrow=  
<Group zIndex={this.props.zIndex} onMouseDown={this.parentsCallBacks} onMouseUp={this.parentsCallBacks} onClick={this.parentsCallBacks} zIndex={this.props.elements.length -1}  >
<Arrow
points={[this.props.rX,this.props.rY,this.props.sX,this.props.sY]} 
pointerLength={10} 
pointerWidth={10} 
id="konva" fill={`${this.props.color}`} 
visible={this.props.visibilityStatus===false ? false :true}
stroke={`${this.props.color}`} 
 strokeWidth={2.5} 
dragBoundFunc={ pos=> {
    var Ylimit=pos.y > window.innerHeight*8.65/10 ? window.innerHeight*8.65/10 : pos.y
    var Xlimit=pos.x > window.innerWidth*4/5 ? window.innerWidth*4/5 : pos.x
    return {
      x: pos.x,
      y: pos.y
    };}
  }/>
  <Rect 
  id="r"
  ref={node => {
    this.pointR = node;
  }}
  //zIndex={1} 

cornerRadius= {2}
x={this.props.rX - 5}
y={this.props.rY - 5}
 width={10} 
 height={10} 
 draggable={true} fill="green"
 visible={this.props.visibilityStatus===false || this.props.selectedElementsID !== this.props.id ? false :true}>
 </Rect>
 <Rect 
 id="s"
 ref={node => {
    this.pointS = node;
  }}
 //zIndex={1} 

cornerRadius= {2}
x={this.props.sX -5}
y={this.props.sY - 5}
 width={10} 
 height={10} 
 draggable={true} fill="green"
 visible={this.props.visibilityStatus===false || this.props.selectedElementsID !== this.props.id ? false :true}>
 </Rect>
 </Group>




        return(

            this.props.element==="line" ? line : this.props.element==="polygon" ? polygon : 
            this.props.element==="triangle" ? triangle : this.props.element==="rectangle" ? rectangle :
            this.props.element==="Oval" ? oval : 
            this.props.element==="border rectangle" ? borderRectangle :arrow




        )
    }

    }

我很乐意展示一个使用 Skype、Slack 或任何其他屏幕共享平台的演示。谢谢

4

1 回答 1

1

您可能没有key正确使用属性。

你可以在这里阅读更多关于它的信息：https ://reactjs.org/docs/lists-and-keys.html

简而言之，只需确保您所在州的每个元素都有唯一的 id。然后将该 id 用于key属性：

this.state.elements.map((el) => { return <Element key={el.id} {...otherProps} />});

也看看这个演示：https ://konvajs.org/docs/react/zIndex.html

于 2020-01-10T14:43:36.390 回答