This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Kevin Cannon
Posted Jan 24 - Read on Facebook

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?

8 Comments

Joshua Tucker

Framer doesn't do path drawing (but it's on the to-do list), so you might need to look into something like Paper.js (http://paperjs.org/tutorials/getting-started/using-javascript-directly/)

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.

Kevin Cannon

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.

http://share.framerjs.com/1f0uqia8lrll/

Caveat, it's not doing any centering of the line right now, so it'll only work well with thinish lines.

Joshua Tucker

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)?

Kevin Cannon

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.

Joshua Tucker

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.

Jordan Robert Dobson

Kevin just make the line 1px wide and and a box shadow or border to make it appear wider.

Kevin Cannon

Jordan - Nice idea. I'll try that!

Kevin Cannon

Jordan Robert Dobson - Here's an update, used the inbuilt Framer shadow & works well: http://share.framerjs.com/3cybq84xgzey/

Read the entire post on Facebook