これは、壊れたコードのヘルプではなく、アドバイスの要求ですが、ご容赦ください...
かなり原始的な HTML5 キャンバスを使用して、以下のリンクの画像をデザインしました。サッカーの試合中にプレーヤーが行う個々のパスと、ピッチ自体を描画します。これは完全に正常に機能します。
最初はこれだけでしたが、各行をクリックできるようにこれを拡張したいと思います。これにより、そのパスに関する特定の情報が AJAX を介して要素の外部に読み込まれます (誰がパスしたかなど)。 . ここで jQuery が役立つと思っていますが、正直なところ、わかりません。私はたくさんのグーグルをしましたが、間違ったことを探しているのではないかと思います。
このようなことを可能にするjQueryスクリプトがあるかどうかは誰にもわかりませんか? コードを書いてくれと頼んでいるわけではありません。正しい方向を指し示す必要があるだけです。
乾杯
ボトムアップで学習したい場合は、ライブラリを避けることをお勧めします。
ライン座標、ソース、その他の添付したい情報など、すべての重要な情報を保持する各ラインの内部オブジェクトを作成できます。
次に、これらのオブジェクトからの線の単純なパッシブ ビューポート/レンダリングとしてキャンバスを見てください。
例：
function myObject() {
this.line = [x1, y1, x2, y2]; /// initialize with constructor of manually
this.source = 'Bob';
... any other information ...
return this;
}
これでオブジェクトができました。これらを単純に配列に格納できます。
var objectStack = [];
var object1 = new myObject();
object1.line = [0, 0, 100, 100];
object1.source = 'Joe';
...
objectStack.push(object1);
/// next
次の論理的なステップはもちろん、オブジェクトをキャンバスにレンダリングすることです。キャンバスは単なるピクセル プールであり、オブジェクトでは機能しないため、これらのデータのビューポートとしてのみ機能します。
ただし、内部でオブジェクトを操作するため、キャンバスから座標を取得し、それを使用して各オブジェクトを確認できます。必要に応じて、この段階で jQuery を使用できますが、実際には必要ありません。
canvas.onclick = function(e) {
/// adjust coordinates
var rect = canvas.getBoundingClientRect(),
x = e.clientX - rect.left,
y = e.clientY - rect.top;
/// iterate objects
...
}
単純な線の場合、コンテキスト関数を使用するかisPointInStroke()（たとえば、以前の回答の使用方法を参照できます）、他の数学的アプローチを使用して、点が線上にあるかどうかを判断できます。
それが現在のオブジェクトである場合、必要なオブジェクトになります。
このアプローチのもう 1 つの利点は、オブジェクトをキャンバスなどに自己更新するメソッドと関数を組み込むことができることです。
これを手動で行いたくない場合は、これらすべてを行う多くのライブラリのいずれかをいつでも使用できますが、オブジェクトの定義方法に制限されます。