方法比较：EaselJS vs多个画布与隐藏画布的交互性

Question

1.）我找到了一个名为EaselJS的画布API，它为您绘制的每个元素创建了一个显示列表。他们实质上成为画布上单独可识别的对象（在一个单一的画布上）

2.）然后，我看到http://simonsarris.com/关于本教程可以拖放，它利用隐藏画布概念进行选择。

3.）第三种方法，一种工作方法，http://www.lucidchart.com/，正是我想要实现的，基本上在不同的画布上有每一个形状，并用它们来定位它们。有大量的画布。

的问题是，什么是实现交互式网络图上http://www.lucidchart.com/

A面的问题是所看到的最简单的方法，是能够更好地通过定位获取文本输入在画布上或使用多个画布（一个用于渲染文本）在LucidChart

Answer 1

我是在2年制作教程的人。这里有很多事情要做，所以我会试着解释一下。

我使用隐藏的画布进行选择，因为它易于学习，并且适用于任何类型的对象（文本，复杂路径，矩形，半透明图像）。在我写的真正图表库中，我没有做任何事情，而是使用大量的数学来确定选择。对于少于1000个对象，隐藏画布方法很好，但最终性能开始受损。

Lucidchart实际上每个对象使用多个画布。它不只是让他们在内存中，他们都在那里的DOM。这是他们的组织选择，在我看来这是一个非常奇怪的选择。如果SVG想要做什么，SVG可能会让他们的工作变得更容易，就好像他们正在做很多脚步事情，只是为了模仿SVG的工作方式。如果可以避免的话，那么在DOM中有这么多的画布没有太多的好理由。

在我看来，他们这样做的好处是，如果他们有10,000个对象，当你点击时，你只需要看一下被选中的一个（小）画布进行选择测试，而不是整个画布。所以他们这样做是为了让他们的选择代码更短一些。我宁愿只在DOM中有一个画布;他们的方式似乎不必要地混乱。画布的要点是有一个快速的渲染表面而不是代表对象的一千个div。但他们只制作了一千幅油画。

无论如何，要回答你的问题，实现lucidchart等交互式网络图的“最简单”方法是使用库或使用SVG（或SVG库）。不幸的是，还没有太多。在Canvas中自己掌握所有功能是很困难的，但肯定是可行的，并且会比SVG提供更好的性能，特别是如果您计划在图表中使用超过5,000个对象。现在开始使用EaselJS并不是一个好主意，尽管在深入了解项目的过程中，您可能会发现自己修改的越来越多。

我正在为Northwoods Software制作一个这样的交互式画布图表库，但它会在几个月内完成。

要回答您的标题中排序的问题：执行交互性的最快方法，如命中测试使用数学。任何具有支持许多不同类型对象的功能的高性能画布库将最终实现getNearestIntersectionPoint，getIntersectionsOnRect，pathContainsPoint等功能。

至于你的侧面问题，我认为在用户想要改变文本然后在用户输入文本时摧毁文本的情况下，在画布顶部创建文本字段是最直观的方式获得文本输入。当然，您需要确保字段在您正在编辑的文本上正确放置，并且字体和字体大小相同以获得一致的感觉。

祝您的项目好运。让我知道事情的后续。

Answer 2

使用SVG（也许图书馆作为拉斐尔）！

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