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:

  1. on mousedown event, record (x0,y0) , b (x1,y1)
  2. on mouseup event, record mouse position (x2,y2)
  3. 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

Popular posts from this blog

javascript - Using jquery append to add option values into a select element not working -

Android soft keyboard reverts to default keyboard on orientation change -

Rendering JButton to get the JCheckBox behavior in a JTable by using images does not update my table -