Simulate a drawn line between two mouse clicks

advanced-prototyping
#1

Here is the challenge:


Not expecting to be able to dynamically create a line shape, but rather take advantage of Cursor.X and Cursor.Y to place a preexisting object between the two points (Perhaps a rotated object). Not exactly sure what the simplest approach would be, but checking to see if this has been done before.

Thanks!

How to animate a diagonal line connecting two points?
#2

This would be much easier in version 8 as you can rotate with a specified anchor point. Then, given Δx and Δy you have a right triangle for which you can calculate the length of the line (the hypotenuse) you need and the angle you need to rotate by with a little trigonometry (Δx and Δy will give use the opposite and adjacent sides, though we already need to calculate the hypotenuse too).

For the length of the line, I’d put a really long line in a dynamic panel then resize the panel to mask the line to the appropriate length.

Maybe if I have some time during lunch or over the weekend I’ll take a stab at this. Gonna have to brush up on my trig.

#3

Here’s a proof of concept in version 8, included below. Note that this isn’t complete and I’ve not accounted for things like the second click being to the left of the first, etc. It should all be doable, but for this example just make sure the second click is above and to the right of the first.

Yes, I did have to look up the trigonometric functions. Look, high school was a while ago. Also, I had to dismember Pi to 3.14 because I couldn’t remember any other digits and Axure doesn’t support Math.PI! No love for Pi?? Finally, the trigonometric functions in JavaScript use radians, so I had to convert to degrees as well.

2click-angle.rp (58.5 KB)

#4

Nice work! Thanks for taking the time to put this together, and for brushing up on your trig!

#5

You’re welcome. To complete it I think you’d need four cases, one for each quadrant of second click combinations (x, y; -x, y; -x, -y; etc.) Then you could just tweak the calculations in each to move and rotate the line correctly. Maybe you could get clever and do it in one but I think that’d just be easier.

I also left out the line shortening so it was easier to see what was happening but you can get the correct length thanks to Pythagoras.

#6

I’ve posted a short tutorial on this topic.
Please refer to it here: How to create a Line Draw function in Axure with some math and trigonometry