Databases
StackOverflow2013
Postsdbo
POMath to find edge between two boxes
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMath to find edge between two boxes
    primarykey
    data
    text
    <p>I am building prototype tool to draw simple diagrams.</p> <p>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. </p> <p>This is the drawing that visualize my problem: <img src="https://i.stack.imgur.com/fu2b0.png" alt="Algorithm"></p> <p>How to find x1,y1 and x2,y2 ?</p> <p>-- UPDATE --</p> <p>After 2 days finding solution, this is example &amp; function that i use:</p> <pre><code>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) &gt; h * Math.abs(delta_x)) { if (delta_y &gt; 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 &gt; 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 &amp;&amp; Math.abs(ox + h * (delta_x/delta_y)) &lt;= 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)) &lt;= h) { d = [sgn(delta_x)*w,sgn(delta_x)*(-1*oy + w * (delta_y/delta_x))]; } if (delta_y != 0 &amp;&amp; Math.abs(-1*ox+(h * (delta_x/delta_y))) &lt;= 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)) &lt;= 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]; } } </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USRizky Ramadhan
    1. USRizky Ramadhan
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POMath to find edge between two boxes
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POMath to find edge between two boxes
      1. This table or related slice is empty.
      1. VTUpMod
    1. COthe problem is i need to draw an *arrow*. So if the center point still in the box, it will look weird.
      singulars
      1. POMath to find edge between two boxes
      1. USRizky Ramadhan
    2. COAre you sure this is a problem? You could simply draw a filled box right on top of the line from center to center.
      singulars
      1. POMath to find edge between two boxes
      1. USJuho Vepsäläinen
    3. COyes bebraw, this is a problem. Because if i cover line with box, the arrow tip will be hidden.
      singulars
      1. POMath to find edge between two boxes
      1. USRizky Ramadhan
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload