Hey I am new to react konva. I am creating a project in which i want a rectangle to revolves around an object. Can anybody advise me on how to achieve this. Any help is much appreciated
<div>
<Stage width={500} height={500}>
<Layer>
<Rect ///<=this rect is the center object
width={50}
height={100}
x={20}
y={20}
strokeWidth={2}
stroke="red"
fill="blue"
opacity={1}
/>
<Rect ///<=this rect should revolve around it
width={50}
height={100}
x={50}
y={50}
strokeWidth={2}
stroke="black"
fill="black"
opacity={1}
/>
</Layer>
</Stage>
<Button onClick={handleRotate}>Start Rotation</Button>
</div>
you can use the .rotate
property of node
const ref=useRef(null)
useEffect(() => {
var rect= ref.current;
var anim = new Konva.Animation((frame) => {
rect?.rotate((frame.timeDiff *90) / 1000);
}, rect?.getLayer());
anim?.start();
}, [input]);
<Rect
ref={ref}
/>