CODEWITHSUNDEEP
reactjskonvajsreact-konvakonvajs-reactjs
abdullah yıldız
abdullah yıldız

Reputation: 166

Konva-React Rotation Displaying

is there a simple method to get Konva arrow object's rotation attribute after I draw an arrow with coordinates of points?

I could get with trigonometry but I wonder is there a custom way in Konva to get rotation info?

         <Arrow
            points={[startPos.xe, startPos.ye, endPos.xe, endPos.ye]}
            pointerLength={12}
            pointerWidth={10}
            fill='teal'
            stroke="black"
            strokeWidth={5}
            
         />

Upvotes: 1

Views: 236

Answers (1)

lavrton
lavrton

Reputation: 20308

Konva doesn't have any methods for that. Also, please keep in mind that any Konva.Node instance has its own rotation attribute. So in that case, an arrow shape has rotation = 0 (defualt value).

But you can calculate angle of arrow line for different purposes. You can use this for calculations:

const getAngle = (points) => {
  const dx = points[1].x - points[0].x;
  const dy = points[1].y - points[0].y;
  const angle = Math.atan2(dy, dx);
  return Konva.Util.radToDeg(angle);
}

Upvotes: 2

Related Questions