Question

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:

How to find x1,y1 and x2,y2 ?

— UPDATE —

After 2 days finding solution, this is example & function that i use:

var box1 = { x:1,y:10,w:30,h:30 };
var box2 = { x:100,y:110,w:30,h:30 };

var edge1 = findBoxEdge(box1,box2,1,0);
var edge2 = findBoxEdge(box1,box2,2,0);

function findBoxEdge(box1,box2,box,distant) {
    var c1 = box1.x + box1.w/2;
    var d1 = box1.y + box1.h/2;
    var c2 = box2.x + box2.w/2;
    var d2 = box2.y + box2.h/2;
    var w,h,delta_x,delta_y,s,c,e,ox,oy,d;

    if (box == 1) {
        w = box1.w/2;
        h = box1.h/2;
    } else {
        w = box2.w/2;
        h = box2.h/2;
    }

    if (box == 1) {
        delta_x = c2-c1;
        delta_y = d2-d1;
    } else {
        delta_x = c1-c2;
        delta_y = d1-d2;
    }
    w+=5;
    h+=5;

    //intersection is on the top or bottom
    if (w*Math.abs(delta_y) > h * Math.abs(delta_x)) {
        if (delta_y > 0) {
            s = [h*delta_x/delta_y,h];
            c = "top";
        }
        else {
            s = [-1*h*delta_x/delta_y,-1*h];
            c = "bottom";
        }
    } 
    else {
    //intersection is on the left or right
        if (delta_x > 0) {
            s = [w,w*delta_y/delta_x];
            c = "right";
        }
        else {
            s = [-1*w,-1*delta_y/delta_x];
            c = "left";
        }
    }

    if (typeof(distant) != "undefined") {
        //for 2 paralel distant of 2e
        e = distant;

        if (delta_y == 0) ox = 0;
        else ox = e*Math.sqrt(1+Math.pow(delta_x/delta_y,2))

        if (delta_x == 0) oy = 0;
        else oy = e*Math.sqrt(1+Math.pow(delta_y/delta_x,2))

        if (delta_y != 0 && Math.abs(ox + h * (delta_x/delta_y)) <= w) {
            d = [sgn(delta_y)*(ox + h * (delta_x/delta_y)),sgn(delta_y)*h];
        } 
        else if (Math.abs(-1*oy + (w * delta_y/delta_x)) <= h) {
            d = [sgn(delta_x)*w,sgn(delta_x)*(-1*oy + w * (delta_y/delta_x))];
        }
        if (delta_y != 0 && Math.abs(-1*ox+(h * (delta_x/delta_y))) <= w) {
            d = [sgn(delta_y)*(-1*ox + h * (delta_x/delta_y)),sgn(delta_y)*h];
        }
        else if (Math.abs(oy + (w * delta_y/delta_x)) <= h) {
            d = [sgn(delta_x)*w,sgn(delta_x)*(oy + w * (delta_y/delta_x))];
        }

        if (box == 1) {
            return [Math.round(c1 +d[0]),Math.round(d1 +d[1]),c];
        } else {
            return [Math.round(c2 +d[0]),Math.round(d2 +d[1]),c];       
        }
    } else {
        if (box == 1) {
            return [Math.round(c1 +s[0]),Math.round(d1 +s[1]),c];
        } else {
            return [Math.round(c2 +s[0]),Math.round(d2 +s[1]),c];       
        }

    }

Answer 1

tl;dr -> Look at the jsbin code-example

It is our goal to draw a line from the edges of two Rectangles A & B that would be drawn through their centers.
Therefore we’ll have to determine where the line pierces through the edge of a Rect.
We can assume that our Rect is an object containing x and y as offset from the upper left edge and width and height as dimension offset.

This can be done by the following code. The Method you should look at closely is pointOnEdge.

// starting with Point and Rectangle Types, as they ease calculation
var Point = function(x, y) { 
  return { x: x, y: y }; 
};
var Rect  = function(x, y, w, h) {
  return { x: x, y: y, width: w, height: h };
};
var isLeftOf = function(pt1, pt2) { return pt1.x < pt2.x; };
var isAbove  = function(pt1, pt2) { return pt1.y < pt2.y; };
var centerOf = function(rect) {
  return Point(
    rect.x + rect.width / 2,
    rect.y + rect.height / 2
  );
};
var gradient = function(pt1, pt2) {
  return (pt2.y - pt1.y) / (pt2.x - pt1.x);
};    
var aspectRatio = function(rect) { return rect.height / rect.width; };

// now, this is where the fun takes place
var pointOnEdge = function(fromRect, toRect) {
  var centerA = centerOf(fromRect),
      centerB = centerOf(toRect),
      // calculate the gradient from rectA to rectB
      gradA2B = gradient(centerA, centerB),
      // grab the aspectRatio of rectA
      // as we want any dimensions to work with the script
      aspectA = aspectRatio(fromRect),

      // grab the half values, as they are used for the additional point
      h05 = fromRect.width / 2,
      w05 = fromRect.height / 2,

      // the norm is the normalized gradient honoring the aspect Ratio of rectA
      normA2B = Math.abs(gradA2B / aspectA),

      // the additional point
      add = Point(
        // when the rectA is left of rectB we move right, else left
        (isLeftOf(centerA, centerB) ? 1 : -1) * h05,
        // when the rectA is below
        (isAbove(centerA, centerB)  ? 1 : -1) * w05
      );

  // norm values are absolute, thus we can compare whether they are
  // greater or less than 1
  if (normA2B < 1) {
    // when they are less then 1 multiply the y component with the norm
    add.y *= normA2B;
  } else {
    // otherwise divide the x component by the norm
    add.x /= normA2B;
  }
  // this way we will stay on the edge with at least one component of the result
  // while the other component is shifted towards the center

  return Point(centerA.x + add.x, centerA.y + add.y);
};

I wrote a jsbin, you can use to test with some boxes (lower part, in the ready method):

You might want to take a look at a little Geometry helper I wrote some time ago on top of prototype.js

I really hope, that this helps you with your problem 😉