私は 2 でチュートリアルを作成した人です。ここでは多くのことが行われているので、少し説明しようと思います。
隠しキャンバスを使用して選択するのは、簡単に習得でき、あらゆる種類のオブジェクト (テキスト、複雑なパス、四角形、半透明の画像) で機能するためです。私が書いている実際の作図ライブラリでは、そのようなことは何もせず、代わりに多くの数学を使用して選択を決定します。hidden-canvas メソッドは 1000 個未満のオブジェクトには問題ありませんが、最終的にはパフォーマンスが低下し始めます。
Lucidchart は、実際にはオブジェクトごとに複数のキャンバスを使用します。そして、それらはメモリ内にあるだけでなく、すべて DOM にあります。これは彼らの組織的な選択であり、私の意見ではかなり奇妙なものです。SVG は、SVG がどのように機能するかを少しエミュレートできるようにするためだけに多くのフットワークを行っているように見える場合、SVG によって作業がはるかに簡単になった可能性があります。回避できるのであれば、DOM に非常に多くのキャンバスを配置する正当な理由はあまりありません。
彼らがそのようにすることの利点は、10,000 個のオブジェクトがある場合、クリックすると、キャンバス全体ではなく、選択テストのためにクリックされた 1 つの (小さな) キャンバスだけを見る必要があることです。そこで彼らは、選択コードを少し短くするためにそれを行いました。DOM にキャンバスを 1 つだけ持つ方がよいでしょう。彼らのやり方は不必要に乱雑に見えます。キャンバスのポイントは、オブジェクトを表す何千もの div の代わりに、高速なレンダリング サーフェスを持つことです。しかし、彼らは千枚のキャンバスを作っただけです。
とにかく、あなたの質問に答えるために、lucidchart のようなインタラクティブなネットワーク図を実現する「最も簡単な」方法は、ライブラリを使用するか、SVG (または SVG ライブラリ) を使用することです。残念ながら、まだあまり多くはありません。Canvas ですべての機能を自分で取得することは困難ですが、確かに実行可能であり、特に図に 5,000 を超えるオブジェクトを含めることを計画している場合は、SVG よりも優れたパフォーマンスを得ることができます。今のところ、EaselJS から始めるのはそれほど悪い考えではありませんが、プロジェクトに深く入り込むにつれて、EaselJS をどんどん変更していることに気付くでしょう。
私はNorthwoods Software向けにそのようなインタラクティブなキャンバス ダイアグラム ライブラリを作成していますが、あと数か月は完成しません。
タイトルのような質問に答えるには: ヒット テストなどのインタラクティブ性を実現する最速の方法は、数学を使用することです。多くの異なるタイプのオブジェクトをサポートする機能を備えた高性能キャンバス ライブラリは、getNearestIntersectionPoint、getIntersectionsOnRect、pathContainsPoint などの関数を実装することになります。
あなたの副次的な質問については、ユーザーがテキストを変更したいときにキャンバスの上にテキストフィールドを作成し、ユーザーがテキストの入力を完了したときにそれを破棄することが、テキスト入力を取得する最も直感的な方法であるというのが私の意見です。もちろん、フィールドが編集中のテキストの上に正しく配置されていること、およびフォントとフォントのサイズが一貫した感じになるように同じであることを確認する必要があります。
あなたのプロジェクトの幸運を祈ります。それがどうなるか教えてください。