Mathematics Stack Exchange is a question and answer site for people studying math at any level and professionals in related fields. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I am building prototype tool to draw simple diagrams.

I need to draw an arrow between two boxes, the problem is I have to find edges of two boxes so that the arrow line does not intersect with the box.

This is the drawing that visualize my problem

enter image description here

Given size and position of both boxes. How to find $x_1,y_1$ and $x_2,y_2$ ?

share|cite|improve this question
I think a line clipping algorithm might work, take a look at Cohen Sutherlan Clipping – alejopelaez Feb 11 '12 at 12:50
Please specify the known points on each box. The answer should be simple once the points are known. – NoChance Feb 11 '12 at 12:56
up vote 2 down vote accepted

First a technical solution : draw the line first (your first draw) and then the boxes as 'filled rectangles' then no more line 'inside' should be visible (works best using double-buffering).

Now a mathematical solution supposing that the line joins the centers $(c_1,d_1)$ and $(c_2,d_2)$ of your boxes.

Let's set $\Delta_x:=c_2-c_1$ and $\Delta_y:=d_2-d_1$
We'll work out the problem for box 1 of half-width $w=\frac{W_1}2$ and half-height $h=\frac{H_1}2$ and consider the center as the origin of coordinates (for box 2 you'll just have to change the signs of $\Delta_x$ and $\Delta_y$ and consider $W_2$ and $H_2$ instead, if the two boxes have the same ratio $\frac hw$ you may write both solutions in parallel!).

If $w\cdot |\Delta_y|\gt h\cdot|\Delta_x|\ \ $ (that is if $\left|\frac{\Delta_y}{\Delta_x}\right|\gt \frac hw$ : the intersection is at top or bottom)

  • If $\Delta_y\gt 0$ then the solution is $(h\frac{\Delta_x}{\Delta_y},h)$
  • Else the solution is $(-h\frac{\Delta_x}{\Delta_y},-h)$

Else (if $\left|\frac{\Delta_y}{\Delta_x}\right|\le \frac hw$ : the intersection is at left or right)

  • If $\Delta_x\gt 0$ then the solution is $(w,w\frac{\Delta_y}{\Delta_x})$
  • Else the solution is $(-w,-w\frac{\Delta_y}{\Delta_x})$

Note that these solutions $(s_x,x_y)$ all verify $\frac{s_y}{s_x}= \frac{\Delta_y}{\Delta_x}$ as they should. To find the actual solution you'll just have to add the position of the center of the object to get $(c_1+s_x,\ d_1+s_y)$. If you need a little space over the boxes just increase a bit $w$ and $h$.

Hoping this helped,

UPDATE2 for two parallel lines distant of $2\epsilon$.

Set $o_x:=\epsilon\sqrt{1+(\frac{\Delta_x}{\Delta_y})^2}$ the horizontal offset (or $0$ if $\Delta_y=0$)
Set $o_y:=\epsilon\sqrt{1+(\frac{\Delta_y}{\Delta_x})^2}$ the vertical offset (or $0$ if $\Delta_x=0$)
$\mathrm{sgn}(x)$ is the sign function

If $\Delta_y\neq 0$ and $|(o_x+h\frac{\Delta_x}{\Delta_y}|\le w$

  • a solution is : $\textrm{sgn}(\Delta_y)\cdot (o_x+h\frac{\Delta_x}{\Delta_y},h)$

Else (verify that $|(-o_y+w\frac{\Delta_y}{\Delta_x}|\le h$)

  • a solution is : $\textrm{sgn}(\Delta_x)\cdot (w,-o_y+w\frac{\Delta_y}{\Delta_x})$

If $\Delta_y\neq 0$ and $|(-o_x+h\frac{\Delta_x}{\Delta_y}|\le w$

  • a solution is : $\textrm{sgn}(\Delta_y)\cdot (-o_x+h\frac{\Delta_x}{\Delta_y},h)$

Else (verify that $|(o_y+w\frac{\Delta_y}{\Delta_x}|\le h$)

  • a solution is : $\textrm{sgn}(\Delta_x)\cdot (w,o_y+w\frac{\Delta_y}{\Delta_x})$

These solutions $(s_x,s_y)$ are relative to the center of the box $(c_i,d_i)$. The actual solutions should be $(c_i+s_x,d_i+s_y)$. As previously the sign of $\Delta_x$ and $\Delta_y$ must be changed for the second box.

You'll have to reverify all this (I changed the $o_y$ in $-o_y$ in both 'else').

share|cite|improve this answer
perfect, this is what i am looking for. Thanks raymond. – Rizky Ramadhan Feb 11 '12 at 20:05
It works for single line, Now I wanted to add double line between those two box, It's always wrong... I'm pulling my hair because of this --" – Rizky Ramadhan Feb 11 '12 at 20:07
Wow, thanks for the update. After implementing that, my line is always in the top right corner of the screen (0,0) to (x,y). Am I missing something? – Rizky Ramadhan Feb 12 '12 at 2:58
When I Add second solution (ex,ey) to first solution (c1+sx, d1+sy), so it become (c1+sx+ex,d1+sy+ey) the first line is crossing with second line in the middle. – Rizky Ramadhan Feb 12 '12 at 3:11
@Rizky: of course the solutions $(s_x,s_y)\ $ provided were relative to the center of the box and you had to convert this in $(c_i+s_x,d_i+s_y)\ $. Anyway I'll reverify my solutions... – Raymond Manzoni Feb 12 '12 at 8:42

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.