Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS positioning alignment when drawing line?

CSS positioning alignment when drawing line?

Problem

I have made a simple jsbin to draw a line between 2 points. ( no drawing libraries. just js/jq).

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

so it looks like this :

enter image description here

When I drag the right bottom circle ( I added jquery draggable) it all looks good. Why it looks good ?

becuase the code of origin-transform is : top left

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

So the div's (red line actually) rotation axis is the top left point.

Great.

So where is the problem ?

It starts when I mess with the left top circle... here - I dont know how to deal with the red line position...

enter image description here

  • How can I fix my code in -webkit-transform-origin in order to support both changes ?
Problem courtesy of: Royi Namir

Solution

You just forgot to set the Left offset for the line:

Add

.css('left',x2+10)

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

and everything will work fine:

Your modified example - now with correct start;)

Solution courtesy of: Christoph

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS positioning alignment when drawing line?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×