Javascript 方法比较：EaselJS与多张画布与隐藏画布的互动性

1.）我发现了一个名为EaselJS的canvas API，它为您绘制的每个元素创建了一个显示列表，这是一项非常出色的工作。它们基本上成为画布上可单独识别的对象（在单个画布上）

2.）然后我了解了本教程中的拖放功能，它利用了隐藏画布的概念进行选择

3.）第三种方法是工作方法，这正是我想要实现的，基本上是在不同的画布上放置每个形状，并使用它们来定位。有大量的画布

问题是，如图所示，实现交互式网络图的最简单方法是什么

---

一个附带的问题是，通过在画布上定位或使用多个画布（一个用于渲染文本）来获取文本输入是否更好，如LucidChart中所述。这里有很多事情，所以我试着解释一下

我使用隐藏画布进行选择，只是因为它易于学习，适用于任何类型的对象（文本、复杂路径、矩形、半透明图像）。在我正在编写的真正的图表库中，我不做任何类似的事情，而是使用大量数学来确定选择。“隐藏画布”方法适用于不到1000个对象，但最终性能开始下降

Lucidchart实际上为每个对象使用多个画布。它不仅仅在内存中有它们，它们都在DOM中。就他们而言，这是一个组织上的选择，在我看来是一个相当奇怪的选择。如果他们打算这样做的话，SVG可能会使他们的工作变得更容易，好像他们正在做大量的步法，只是为了能够模拟SVG的工作方式。如果可以避免的话，没有太多好的理由在DOM中有这么多画布

在我看来，他们这样做的好处是，如果他们有10000个对象，当您单击时，您只需查看单击以进行选择测试的一个（小）画布，而不是整个画布。所以他们这样做是为了让他们的选择代码短一点。我宁愿DOM中只有一个画布；他们的道路看起来毫无必要的混乱。canvas的要点是拥有一个快速的渲染表面，而不是一千个代表对象的div。但他们只是做了一千张画布

无论如何，要回答您的问题，实现像lucidchart这样的交互式网络图的“最简单”方法是使用库或SVG（或SVG库）。不幸的是，还没有太多。在画布中自己获取所有功能是很困难的，但肯定是可行的，并且将为您提供比SVG更好的性能，特别是如果您计划在图表中包含5000多个对象。现在从EaselJS开始并不是一个坏主意，不过随着项目的深入，您可能会发现自己对它进行了越来越多的修改

我正在为您制作一个这样的交互式画布图表库，但它需要几个月才能完成

回答标题中的问题：进行互动性测试（如点击测试）的最快方法是使用数学。任何具有支持多种不同类型对象功能的高性能画布库最终都将实现诸如getNearestIntersectionPoint、getIntersectionsOnRect、pathContainsPoint等功能

至于你的附带问题，我认为，当用户想要更改文本时，在画布上创建一个文本字段，然后在用户输入文本后将其销毁，这是获得文本输入的最直观的方式。当然，您需要确保字段正确定位在正在编辑的文本上，并且字体和字体大小相同，以获得一致的感觉

祝你的项目好运。让我知道进展如何。

使用SVG（可能还有拉斐尔那样的库）

---

然后，任何元素都可以接收鼠标事件。

关于和@William Sham Hello呢？事实上，我也在做一些与您的工作类似的事情，并尝试使用easelJs制作一个交互式图表应用程序。您能否指导我如何连接两个图像，一个是CanvastHanks，以获得长时间的响应。我希望能以某种方式与你取得联系。和专家交谈很愉快。我同意Lucidchart的组织方式很混乱。现在想想，我似乎找不到一个令人信服的理由不使用SVG而不是画布，因为SVG将所有内容都作为DOM中的一项。那么，为什么选择为客户机实现画布呢？关于我的项目的一些信息，网络图是其中的一部分，其中图上的每个形状表示从数据库馈送的数据。如果这可能会影响svg与Canvast的对比，那么将来它还需要在ipad上工作。人们选择canvas而不是svg的原因是性能。随着对象数量的增加，画布的缩放效果似乎更好。更多信息：如果您使用easelJS，也可以这样做。此外，借助easelJS，您可以获得更好的性能。