I am trying to find a way to connect two dots with a straight line.
Click box A then box B line shows up connecting them.
Click box C then Box A line shows up connecting them.
I’m trying to do a connect the dots. Can anyone help? I’m new to Axure
Thank’s
You can use the rotation setting (R°) under Location + Size in the Style settings to create an angled line.
If you know the number of dots and their locations you can place all of the lines and set them to hidden. The the first click selects the dot. The second click connects the dot to the previously selected dot. See the attached .rp file for an example.
A more complex solution would be to set up a repeater that stores two points. Then use the OnItemLoad event to with the move, rotate, and set size actions to position the lines between the two points. This will involve more math but would let you set up a line between any two points.
Lines.rp (56.4 KB)
Hi!
Here’s a solution using a repeater to add the lines. The dataset in the repeater has values for x1,y1 and x2,y2 (the two locations of the nodes a line connects), and the OnItemLoad handler sizes and rotates the line appropriately based on the dataset values.
Note that it doesn’t check to see if a line already exists between nodes. Clicking a line deletes it.
File: draw_line_between_two_points.rp (139 KB)
I had to do something like this for a project a while back and I finally had the time to strip an example out of the main project.
I injected some JavaScript to create a <canvas> element and passed the x,y coordinates of Axure widgets back in order to draw lines between them. It worked for what I needed to demonstrate but it’s very brittle. For example, once a line is drawn, it won’t move or redraw if you move the connected objects.
I’m no JavaScript expert, so I’m sure there’s a more elegant/efficient way to do this so if someone wants to clean it up, go for it. Just please share it so I (and others) can learn how you did it. <grin>
Canvas_DrawLine.rp (449 KB)
Thanks for sharing that huban. I had a project that involved drawing lines between arbitary points. I ended up doing it in HTML/JS because I thought I would spent more time setting up the drawing in Axure that focusing on the rest of the interface. This opens up some new possiblities.
Thanks this worked great. Now all I need to do is set it up, to where if they click the wrong dot it saids error and goes back to the last selected dot. I have been trying to make yours work that way. I dont think its going to work. You realy helped me understand this problem better though. So thanks for your help.
What do mean when you say, “click the wrong dot”? Do you mean only certain dots can be connected by a line?
Yes sir, If the dots go in order like A, B, C, D and they select A, B then D instead of C. It would fleas D red as an error then go back to B so the person could then chose C. the correct answer. once C is selected D would be the next one and so on. It’s a dot to dot that tells you when you have picked one out of order.
If you just need them to always connect in a specific order then I think most of this is overkill. Set everything up, lines and dots. Then when you get to interactions have OnClick of B show the pre-existing line between A and B. On the OnClick cases of C and D, have a condition that checks the visibility of the line connecting A and B. If that line is hidden (they didn’t click B yet) show your error and nothing happens.
Here’s an example that includes that behavior that only took me a minute to make. Is this what you wanted? I haven’t added the error messages but you would simply add them as ELSE IF cases after the existing OnClick cases on the dots.
Making dots you can connect in any is 100x harder than making dots you can only connect in a specific order.
dotsAndLines.rp (60.3 KB)
Hey nkrisc
My first thought was to lay it out and do the lines like that (On click Show/Hide). Because I don’t know how to do any actions without them being an Axure prebuilt one. But I have to put more than 60 dots on a page and there are 20 pages to be built in the prototype. I was looking for something faster than hand doing 1200 lines with Axure crazy rotations tool.
I’m new to Axure. I really appreciate how helpful this community is. Thanks for all y’all great Idea’s
I see, that is a bit different. If you choose to stick with Axure widgets you could at least use the pen tool to draw the lines.
Please refer to this post for a short tutorial on the topic: How to create a Line Draw function in Axure with some math and trigonometry