Is it possible to draw a shape based on an onClick Event in React JS using react-konva?

user_14113603 0
Viewed 118

I am looking for a way to draw a shape based on a mouse event in react-konva, but have only been able to find methods to draw shapes on the screen statically

react-konva konvajs reactjs
1 Answers

Yes, you can add onClick event to your Stage like <Stage width={yourWidth} height={yourHeight} ref={stageRef} onClick={handleClick}> and then

const handleClick = (e) => {
    setCircles((prevCircles) => [
      ...prevCircles,
      {
        x: e.currentTarget.pointerPos.x,
        y: e.currentTarget.pointerPos.y,
        fill: "blue"
      }
    ]);
  }

and don't forget to .map your circles state inside of Stage ;)

user_130401740
Related