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