方法比较：EaselJS、多个画布、隐藏画布的交互性
1.) 我发现了一个名为 EaselJS 的画布 API，它在为您绘制的每个元素创建显示列表方面做得非常出色。它们本质上成为画布上可单独识别的对象（在一个画布上）
2.）然后我在 http://simonsarris.com/ 上看到了关于本教程可以进行拖放操作，它利用隐藏的画布概念进行选择。
3.）第三种方法，一种工作方法， http://www.lucidchart.com/ ，这正是我的方法我试图实现的目标是，基本上将每个形状放在不同的画布上，并用于定位它们。有大量的画布。
问题是，实现 http://www.lucidchart.com/ 上看到的交互式网络图的最简单方法是
什么问题是，通过在画布上定位或使用多个画布（一个用于渲染文本）来获取文本输入是否更好，如 LucidChart 中所示
1.) I found a canvas API called EaselJS, it does an amazing job of creating a display list for each elements you draw. They essentially become individually recognizable objects on the canvas (on one single canvas)
2.) Then I saw on http://simonsarris.com/ about this tutorial that can do drag and drop, it makes use of a hidden canvas concept for selection.
3.) And the third approach, a working approach, http://www.lucidchart.com/ , which is exactly what I'm trying to achieve, basically have every single shape on a different canvas, and use to position them. There's a huge amount of canvas.
The question is, what is the easiest way to achieve interactive network diagram as seen on http://www.lucidchart.com/
A side question is, is it better to get text input through positioning on canvas or using multiple canvas (one for rendering text) as in LucidChart
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我是制作 2 教程的人。这里发生了很多事情，所以我会尝试解释一下。
我使用隐藏画布进行选择只是因为它易于学习并且适用于任何类型的对象（文本、复杂路径、矩形、半透明图像）。在我正在编写的真实图表库中，我不做任何此类事情，而是使用大量数学来确定选择。对于少于 1000 个对象，隐藏画布方法还不错，但最终性能会开始受到影响。
Lucidchart 实际上每个对象使用多个画布。而且它们不仅仅存在于内存中，它们都存在于 DOM 中。这是他们的组织选择，在我看来这是一个相当奇怪的选择。如果他们打算这样做的话，SVG 可能会让他们的工作变得更加容易，就好像他们做了很多步子工作只是为了能够模拟 SVG 的工作方式一样。如果可以避免的话，没有太多充分的理由在 DOM 中拥有如此多的画布。
在我看来，他们这样做的好处是，如果他们有 10,000 个对象，那么当您单击时，您只需查看被单击的一个（小）画布即可进行选择测试，而不是整个画布。所以他们这样做是为了让他们的选择代码更短一些。我宁愿 DOM 中只有一张画布；他们的方式似乎不必要地混乱。 canvas 的要点是拥有一个快速渲染表面而不是代表对象的一千个 div。但他们只画了一千幅画布。
无论如何，要回答你的问题，实现像 lucidchart 这样的交互式网络图的“最简单”方法是使用库或使用 SVG （或 SVG 库）。不幸的是，目前还没有太多。自己在 Canvas 中获取所有功能很困难，但肯定是可行的，并且将为您提供比 SVG 更好的性能，特别是如果您计划在图表中包含超过 5,000 个对象。现在从 EaselJS 开始并不是一个太糟糕的想法，尽管随着您深入项目，您可能会发现自己修改了越来越多的内容。
我正在为 Northwoods Software 制作一个这样的交互式画布图表库，但还要几个月才能完成。
回答标题中的问题：进行命中测试等交互性的最快方法是使用数学。任何具有支持多种不同类型对象功能的高性能画布库最终都会实现 getNearestIntersectionPoint、getIntersectionsOnRect、pathContainsPoint 等函数。
至于你的附带问题，我认为当用户想要更改文本时在画布顶部创建一个文本字段，然后在用户输入完文本后销毁它是获取文本输入的最直观的方式。当然，您需要确保该字段正确定位在您正在编辑的文本上，并且字体和字体大小相同，以获得一致的感觉。
祝你的项目好运。让我知道进展如何。
I'm the person who made the tutorials in 2. There's a lot going on here, so I'll try to explain a bit.
I use a hidden canvas for selection simply because it is easy to learn and will work for ANY kind of object (text, complex paths, rectangles, semi-transparent images). In the real diagramming library that I am writing, I don't do anything of the sort, instead I use a lot of math to determine selection. The hidden-canvas method is fine for less than 1000 objects, but eventually performance starts to suffer.
Lucidchart actually uses more than one canvas per object. And it doesn't just have them in memory, they are all there the DOM. This is an organizational choice on their part, a pretty weird one in my opinion. SVG might have made their work a lot easier if thats what they are going to do, as if seems they are doing a lot of footwork just to be able to emulate how SVG works a bit. There aren't too many good reasons to have so many canvases in the DOM if you can avoid it.
It seems to me that the advantage of them doing it that way is that if they have 10,000 objects, when you click, you only have to look at the one (small) canvas that is clicked for selection testing, instead of the entire canvas. So they did it to make their selection code a little shorter. I'd much rather only have one canvas in the DOM; their way seems needlessly messy. The point of canvas is to have a fast rendering surface instead of a thousand divs representing objects. But they just made a thousand canvases.
Anyway, to answer your question, the "easiest" way to achieve interactive network diagrams like lucidchart is to either use a library or use SVG (or an SVG library). Unfortunately there aren't too many yet. Getting all the functionality yourself in Canvas is hard but certainly doable, and will afford you better performance than SVG, especially if you plan on having more than 5,000 objects in your diagrams. Starting with EaselJS for now isn't too bad of an idea, though you'll probably find yourself modifying more and more of it as you get deeper into your project.
I am making one such interactive canvas diagramming library for Northwoods Software, but it won't be done for a few more months.
To answer the question that is sort-of in your title: The fastest method of doing interactiveness such as hit-testing is using math. Any high-performance canvas library with the features to support a lot of different types of objects will end up implementing functions like getNearestIntersectionPoint, getIntersectionsOnRect, pathContainsPoint, and so on.
As for your side question, it is my opinion that creating a text field on top of the canvas when a user wants to change text and then destroying it when the user is done entering text is the most intuitive-feeling way to get text input. Of course you need to make sure the field is positioned correctly over the text you are editing and that the font and font sizes are the same for a consistent feel.
Best of luck with your project. Let me know how it goes.
使用 SVG（也许还有 Raphael 等库）！！
那么任何元素都可以接收鼠标事件。
Using SVG (and maybe libraries as Raphael)!!
Then any element can receive mouse events.