方法比较:EaselJS vs多个画布vs隐藏画布的互动性

Approach comparison: EaselJS vs Multiple Canvases vs Hidden Canvas for interactiveness

本文关键字：vs 互动性隐藏比较 EaselJS 方法更新时间：2023-09-26

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

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

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

问题是，实现交互式网络图的最简单方法是什么http://www.lucidchart.com/

一个附带的问题是，是通过在画布上定位来获得文本输入更好，还是像LucidChart 中那样使用多个画布（一个用于渲染文本）更好

我是在2中制作教程的人。这里发生了很多事情，所以我试着解释一下。

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

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

在我看来，他们这样做的好处是，如果他们有10000个对象，当你点击时，你只需要查看被点击的一个（小）画布进行选择测试，而不是整个画布。所以他们这样做是为了缩短他们的选择代码。我更希望DOM中只有一个画布；他们的方式似乎毫无必要的混乱。画布的重点是拥有一个快速渲染的表面，而不是的一千个div表示对象。但他们只制作了一千幅画布。

无论如何，为了回答您的问题，实现像lucidchart这样的交互式网络图的"最简单"方法是使用库或使用SVG（或SVG库）。不幸的是，现在还没有太多。在Canvas中自己获得所有功能是困难的，但肯定是可行的，并且会为您提供比SVG更好的性能，尤其是如果您计划在图中拥有5000多个对象的话。现在从EaselJS开始并不是一个坏主意，尽管随着项目的深入，你可能会发现自己修改了越来越多。

我正在为Northwoods软件制作一个这样的交互式画布图形库，但它还要几个月才能完成。

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

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

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

使用SVG（可能还有像Raphael这样的库）！！

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