CSS alignment when drawing a line?

Question

I made a simple jsbin to draw a line between two points. (without drawing libraries, just js / jq).

I already have code that calculates the angle (I took it from this library).

so that it looks like this:

When I drag the circle to the bottom right (I added jquery draggable), everything looks good. Why does it look good?

because origin conversion code: top left

$("#line") .width(...)
           .css('-webkit-transform', 'rotate(' + angle  + 'deg)')
           .css('-webkit-transform-origin','top left').

Thus, the axis of rotation of the div (red line) is actually equal to the point top left.

Great.

So where is the problem?

It starts when I fiddled with the circle left top... here - I don't know how to deal with the red line position ...

• -webkit-transform-origin, ?

Answer 1

:

.css('left',x2+10)

( .css('top',$('#box2').offset().top+10) .css('left',y2+10))

:

- ;)