0

Similar to having drag and drop without moving the element in Konva, is there a way to do the same with Konva-react?

Tried doing this. But, could not find a way to add cloned shape back to the Layer.

Thank you and any help would be appreciated.

Update: Code used: Trying to clone "Shp1" in the below code

class Shp1 extends Component {
  state = {
          x1: 0,
          y1: 0
  };

  handleDragStart = e => {
    e.target.setAttrs({
      scaleX: 1.1,
      scaleY: 1.1
    });
    //clone code goes here
  };

  handleDragEnd = e => {
    this.setState({
            x1: e.target.x(),
            y1: e.target.y()
    });
  };

    render() {
        return(
            <Group x={this.state.x1} y={this.state.y1}
                id="shp1" draggable onDragStart={this.handleDragStart} onDragEnd={this.handleDragEnd}
                onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
            <RegularPolygon x={110} y={160} sides={3} radius={80} 
                fill="black" rotation={90}/>
            <Circle x={190} y={160} radius={30} 
                fill="black"/>

            </Group>
        );
    }
}


class App extends Component {
  render() {
    return (
      <Stage id='stg1' width={window.innerWidth} height={window.innerHeight} draggable={false}>
        <Layer id="menu" className="layer" x={0} y={0} width={200} height={window.innerHeight} visible={true}> 
                   <Shp1/>
        </Layer>
      </Stage>
    );
  }
}
A_P
  • 21
  • 5
  • What did you try? Can you make a code sample? – lavrton Oct 11 '18 at 23:16
  • Thanks for the reply. What I am trying is very much similar to https://stackoverflow.com/questions/29438262/konva-drag-drop-without-moving-drag-element. Trying the exact same thing with Konva-react. – A_P Oct 12 '18 at 15:24

0 Answers0