3

I'm trying to replicate this image as you can see the HTML has 2 points and a line that connects them between. I did this in photoshop to demonstrate what I would like to achieve. So far most of the CANVAS has not yet helped me to do this. Because i must stablish the exact curvature and height and this relations can be small and big depending of the position of the Table Row relation between another Table.

enter image description here

Donald Duck
  • 8,409
  • 22
  • 75
  • 99
Eddwin Paz
  • 37
  • 6
  • maybe this will help http://stackoverflow.com/questions/4712189/how-to-draw-a-line-between-2-elements-using-jquery-and-refreshing-that-line – CR41G14 Mar 05 '13 at 17:03

2 Answers2

0

I would try Raphael.JS http://raphaeljs.com/ http://raphaeljs.com/curver.html

You can get x/y coords of a DOM element using jQuery's offset http://api.jquery.com/offset/

Kabir Sarin
  • 18,092
  • 10
  • 50
  • 41
0

You probably want to use the quadraticCurveTo function. https://developer.mozilla.org/en-US/docs/HTML/Canvas/Tutorial/Drawing_shapes#Bezier_and_quadratic_curves

If you already have the x,y of your two points you are in good shape.

Your control point would be the peak of the curve.

xc = control x

xy = control y

y1 = point 1 y

y2 = point 2 y

Keep your xc static and calculate yc = (y2 - y1) / 2

Jared
  • 12,406
  • 1
  • 35
  • 39
  • I don't have the x,y values. as you can see on the image link. They can vary on position. i think Ralph can be a good option but still how can be both of them related by just adding the on the table row. Example id="idcountry1" id="idcountry2" and get related. – Eddwin Paz Mar 05 '13 at 17:46
  • I assumed you were already able to calculate the x,y as you had mentioned that you were playing with canvas. Are you saying you are not sure how they are related or are unsure when a relationship exists? – Jared Mar 05 '13 at 17:54