How to find Arc length and angle for SVG shapes based on Mouse events in javascript? -
i trying rotate irregular shape object centerusing mouse events.
consider figure @ link http://prntscr.com/7sixkt , line ab acting handle using rotate irregular figure, square show bbox (found center of shape using get bbox method.
know a (center point coordinates) , length of ab (radius of bbox). cannot calculate if move/drag line ab handle rotate shape, how find theta or arc length bc , using arc-length formula have 2 unknowns, l=rθ ( l , θ). kindly guide how find it.
with svg, need point , point b mouse event. pseudo code:
- on mousedown event, record
(x0,y0)
, b(x1,y1)
- on mouseup event, record mouse position
(x2,y2)
- with 3 points, can obtain 3 lengths on cartesian coordinate, in turn can calculate value of
θ
.
with svg, use transform="rotate(θ)"
on <img....>
, rotation clockwise positive values , counter clockwise negative.
Comments
Post a Comment