Wil*_*ham 12 javascript interactive canvas easeljs
1.)我找到了一个名为EaselJS的画布API,它为你绘制的每个元素创建一个显示列表做了很棒的工作.它们基本上成为画布上可单独识别的对象(在一个画布上)
2.)然后我在http://simonsarris.com/上看到了这个可以拖放的教程,它利用隐藏的画布概念进行选择.
3.)第三种方法,一种工作方法,http://www.lucidchart.com/,这正是我想要实现的,基本上在不同的画布上有每一个形状,并用于定位它们.有大量的帆布.
问题是,如http://www.lucidchart.com/所示,实现交互式网络图的最简单方法是什么？
一个侧面的问题是,通过在画布上定位或使用多个画布(一个用于渲染文本)来获取文本输入更好,如LucidChart
Sim*_*ris 12
我是在2中制作教程的人.这里有很多内容,所以我会尝试解释一下.
我使用隐藏的画布进行选择只是因为它易于学习并适用于任何类型的对象(文本,复杂路径,矩形,半透明图像).在我正在编写的真实图表库中,我没有做任何类似的事情,而是使用大量的数学来确定选择.隐藏画布方法适用于少于1000个对象,但最终性能开始受损.
Lucidchart实际上每个对象使用多个画布.而且它不仅仅在内存中存在,它们都存在于DOM中.这是他们的组织选择,在我看来是一个非常奇怪的选择.SVG可能会让他们的工作变得更容易,如果这就是他们要做的事情,好像他们正在做很多步法只是为了能够模仿SVG的工作原理.如果你可以避免它,那么在DOM中有这么多画布并没有太多合理的理由.
在我看来,他们这样做的好处是,如果他们有10,000个对象,当你点击时,你只需要看一下被点击进行选择测试的一个(小)画布,而不是整个画布.所以他们这样做是为了让他们的选择代码更短一点.我宁愿在DOM中只有一个画布; 他们的方式似乎不必要地凌乱.画布的要点是具有快速渲染表面而不是表示对象的一千个div.但他们只是制作了一千幅画布.
无论如何,要回答你的问题,实现像lucidchart这样的交互式网络图的"最简单"方法是使用库或使用SVG(或SVG库).不幸的是,还没有太多.在Canvas中获得所有功能本身很难,但肯定可行,并且可以提供比SVG更好的性能,特别是如果您计划在图表中拥有超过5,000个对象.从现在开始使用EaselJS并不是一个好主意,尽管随着您对项目的深入了解,您可能会发现自己越来越多地修改它.
我正在为Northwoods Software制作一个这样的交互式画布图表库,但是它将在几个月内完成.
回答你标题中的问题:最快的交互方法,如命中测试,就是使用数学.任何具有支持许多不同类型对象的功能的高性能画布库最终都会实现诸如getNearestIntersectionPoint,getIntersectionsOnRect,pathContainsPoint等功能.
至于你的问题,我认为当用户想要更改文本然后在用户输入文本时销毁它时,在画布上创建一个文本字段是获得文本输入的最直观感觉方式.当然,您需要确保字段在正在编辑的文本上正确定位,并且字体和字体大小相同以获得一致的感觉.
祝你的项目好运.让我知道事情的后续.
| 归档时间： |
|
| 查看次数： |
3812 次 |
| 最近记录： |