Hey guys. What's the best way to draw a simple line from point a to b. I will need both handles to be draggable, but what's the simplist way to achive that?
The other option, but seems sketchy, is to create a layer that looks like a line and have a threshold which decides where to set the originX/Y on a dragStart. So say if the value was above half way point on the line, set the origins to the other side for the drag. Then modulate your drag distance on dragMove and tie it to your rotation X/Y of your line.
Hey Joshua, thanks for the tips. I just needed a simple line drawing, so rather than heading full on into another lib. So, I bit the bullet, and tried the hacky version. Turned out it wasn't so bad, and the results are good.
So, here's some basic line drawing in Framer. I cleaned it up so people can use it in their own code if need be.
Caveat, it's not doing any centering of the line right now, so it'll only work well with thinish lines.
Kevin Cannon Thanks for sharing! Sweet. Are you referring to the line not being centered inside the circle? If so, why not modulate the line point to the midpoint of the circle (midX/Y)?
Joshua Tucker - I am doing that. The problem I have is that the line is not centred in itself. If you change it to 50 pixels wide then you will notice that one edge is actually aligned to where the real line would be.
Kevin Cannon Ah yes, you're correct. I've noticed that too - I made the line in the scroll view experiment I posted. Sorry should have checked the code :). I viewed it on mobile.
Kevin just make the line 1px wide and and a box shadow or border to make it appear wider.
Jordan - Nice idea. I'll try that!
Jordan Robert Dobson - Here's an update, used the inbuilt Framer shadow & works well: http://share.framerjs.com/3cybq84xgzey/