1.) 我发现了一个名为 EaselJS 的画布 API，它在为您绘制的每个元素创建一个显示列表方面做得非常出色。它们本质上成为画布上可单独识别的对象（在一个画布上）
2.) 然后我在http://simonsarris.com/上看到了这个可以拖放的教程，它利用隐藏的画布概念进行选择。
3.) 第三种方法，一种工作方法，http://www.lucidchart.com/，这正是我想要实现的，基本上每个形状都在不同的画布上，并用于定位它们。有大量的画布。
问题是，什么是实现交互式网络图的最简单方法，如http://www.lucidchart.com/
一个附带的问题是，通过在画布上定位或使用多个画布（一个用于呈现文本）来获取文本输入是否更好，如 LucidChart
我是在 2 中制作教程的人。这里发生了很多事情，所以我会尝试解释一下。
我使用隐藏画布进行选择只是因为它易于学习并且适用于任何类型的对象（文本、复杂路径、矩形、半透明图像）。在我正在编写的真实图表库中，我不做任何此类事情，而是使用大量数学来确定选择。hidden-canvas 方法适用于少于 1000 个对象，但最终性能开始受到影响。
Lucidchart 实际上每个对象使用多个画布。它不仅将它们保存在内存中，而且它们都存在于 DOM 中。这是他们的组织选择，在我看来是一个非常奇怪的选择。如果这就是他们要做的事情，SVG 可能会让他们的工作变得更容易，好像他们正在做很多步法只是为了能够模仿 SVG 的工作方式。如果可以避免的话，没有太多充分的理由在 DOM 中拥有如此多的画布。
在我看来，他们这样做的好处是，如果他们有 10,000 个对象，当您单击时，您只需查看被单击以进行选择测试的一个（小）画布，而不是整个画布。所以他们这样做是为了让他们的选择代码更短一些。我宁愿在 DOM 中只有一个画布；他们的方式似乎不必要的混乱。画布的重点是有一个快速的渲染表面，而不是代表对象的一千个 div。但他们只是做了一千幅画布。
无论如何，要回答您的问题，实现像 lucidchart 这样的交互式网络图的“最简单”方法是使用库或使用 SVG（或 SVG 库）。不幸的是，还没有太多。自己在 Canvas 中获得所有功能虽然很难，但肯定是可行的，并且会为您提供比 SVG 更好的性能，特别是如果您计划在图表中拥有超过 5,000 个对象。现在从 EaselJS 开始并不是一个坏主意，尽管随着您对项目的深入了解，您可能会发现自己修改的越来越多。
我正在为Northwoods Software制作一个这样的交互式画布图表库，但要再过几个月才能完成。
回答标题中的问题：进行交互性（例如命中测试）的最快方法是使用数学。任何具有支持许多不同类型对象的功能的高性能画布库最终都会实现 getNearestIntersectionPoint、getIntersectionsOnRect、pathContainsPoint 等函数。
至于您的附带问题，我认为当用户想要更改文本时在画布顶部创建一个文本字段，然后在用户完成输入文本时将其销毁是获取文本输入的最直观的方式。当然，您需要确保该字段在您正在编辑的文本上正确定位，并且字体和字体大小相同以获得一致的感觉。
祝你的项目好运。让我知道事情的后续。
使用 SVG（可能还有像 Raphael 一样的库）！！
然后任何元素都可以接收鼠标事件。