Recently, I created a basic jsbin to draw a line connecting two points. It doesn't rely on any drawing libraries; just plain JavaScript and jQuery.
I managed to calculate the angle using code I found in this library.
When dragging the circle at the bottom right (which I made draggable with jQuery), everything looks fine thanks to this snippet:
$("#line") .width(...)
.css('-webkit-transform', 'rotate(' + angle + 'deg)')
.css('-webkit-transform-origin','top left').
The red line's rotation axis is set to the top left point, ensuring its proper display.
But things get complicated when I start moving the circle at the top left... I'm unsure how to handle the position of the red line then...
- How can I adjust the code in
-webkit-transform-origin
to accommodate both changes seamlessly?