I am building a diagramming tool using Adobe Flex 3. I am about to implement connector lines and I have a question.
Imagine I have 2 squares at random positions on the canvas. I need to draw an arrowed connector line between them. I need it to tend to the target square's center but end on its border.
How do I find out the exact points between which to draw the line?
Thank you
Best Answer
Here is an example doing what you want.
This code isn't totally optimized. The idea is more to explain how it works. Basically, we are defining two (random) squares, and tracing a line between them. To trace the line, we calculate an angle from the center of the first square to the center of the second one, and we use a special method (
getSquareBorderPointAtAngle
) to extract a point on the square border in the right direction.This method is the first key point of this snippet. We calculate that using simple circle geometry, with a little complexification on how we make the point match the border instead of matching a circle around or inside the square.
Then, we draw an arrow head. For that, we're making use of the Flash
Matrix
class, because it's much easier this way than to calculate it from the scratch.And here we're done.