jquery - リレーションに基づいてjQueryを使用してテーブルの行に線を引く方法

Question

HTML には 2 つの点とそれらを結ぶ線があることがわかるので、この画像を複製しようとしています。達成したいことを示すために、これをフォトショップで行いました。これまでのところ、CANVAS のほとんどは、これを行うのにまだ役立っていません。正確な曲率と高さを確立する必要があり、このリレーションは、別のテーブル間のテーブル行リレーションの位置に応じて、小さくも大きくもなる可能性があるためです。

Answer 1

Raphael.JS http://raphaeljs.com/ http://raphaeljs.com/curver.htmlを試してみます

jQuery のオフセットhttp://api.jquery.com/offset/を使用して、DOM 要素の x/y 座標を取得できます。

Answer 2

おそらく quadraticCurveTo 関数を使用したいと思うでしょう。 https://developer.mozilla.org/en-US/docs/HTML/Canvas/Tutorial/Drawing_shapes#Bezier_and_quadratic_curves

2 点の x、y が既にある場合は、良好な状態です。

制御点は曲線の頂点になります。

xc = control x

xy = control y

y1 = point 1 y

y2 = point 2 y

静的xcにして計算するyc = (y2 - y1) / 2