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>
);
}
}