与paper.js同时绘图
我有一个应用程序，基于paper.js处理绘图小部件。 几个用户可以同时进行绘制，并且实时更改相互之间的广播。 问题是我需要在文档加载时存储更改并显示绘制的图像。
自然的解决方案是存储客户端在数据库中发送的命令。 但绘制的图像可以包含数千个命令，并且我可以拥有数十个图像。 所以当我打开一个从服务器获取命令列表的文档时，绘图可能会花费太多时间。
有没有更好的方式来存储图像和客户端之间的交互？
请注意，我具有缩放功能，因此存储光栅不是一种选择。
更新：如果我存储图像（例如，在BLOB ），则不清楚如何应用实时更改。 每次传递图像都不是我想要的解决方案。
如果您要将图形保存为图像，则可以使用一些可能的解决方案。
blob保存在数据库中。 Blob实际上是数据库密集型的。 有一些关于blob的artrestles。 像这个来自微软。
正如人们普遍认为的那样，小于256K的对象最好存储在数据库中，而大于1M的对象最好存储在文件系统中。
所以性能的威胁，这将是一个更好的解决方案，将图像保存到一个目录。
也可以导出绘制图像的svg文件。 （信息）我不知道这对你是否有帮助，但这是我个人的经历。 我同意你的看法，把数千个命令存入数据库并不是最好的解决方案。 所以你可能想看看保存图像的地方，但是如果你已经实现了，你将失去编辑图像的能力。
更新：
如果你不想保存一个blob ，最好的解决方案是每次编辑时都要“渲染”图像。 所以当有人打开绘图时你可以执行所有的命令。 只有在触发编辑时才应用最新的命令。
有几个选项可以实现这一点。 就像Jimmy Chandra所说， firebase将是一个很好的解决方案。 他们还提供了一个教程，几乎拥有你想要实现的一切。 （使用x和y坐标实时绘制图像）也许你必须仔细研究一下。
有关Firebase的更多信息。
Firebase是一款功能强大的API，可实时存储和同步数据
这正是你想达到的我相信的。 你可以在这里试试他们的完整教程。
您可能要考虑的其他选项是nodejs 。 我见过使用nodejs作为聊天系统的人将数据发送给所有其他用户。 如果您可以发送数据，我相信您可以使用它来绘制图像。
最后，您需要选择您想要使用的技术。 所以我认为，如果您在集成该技术时遇到麻烦，您可能需要像我建议的那样调查一些解决方案并询问不同的问题。
将客户端数据保存为二级存储是否可以接受？
使用html5文件API时，应该可以保留客户端在数据库中发送的所有保存命令的副本。 因此，下次打开文档时，应用程序将从辅助存储器绘制图形，同时在服务器上查询最新更新，一旦辅助存储器完成渲染，这些更新将被追加。
使用websockets，您可以保存命令，并将更改广播到其他客户端，从而实时更新其绘图。
2年前我开发了类似的东西（在一个团队中，封闭代码）。
首先要注意的是，像这样的东西已经通过谷歌文档解决了。 我们阅读每篇博文和文章，了解他们是如何做到的，并将其应用到像简单编辑器这样的多用户SVG。 所以这里是我记得的：
细分命令是正确的选择。 正如你所写，与他们在一起，你可以重新创建你的图像非常详细。 您甚至可以精确地回答图像在每个请求的时间戳上查看的内容。
示例命令可能是
- change color
- change color again
- draw a line from .. to ..
- draw a line from .. to ..
- draw a line from .. to ..
- draw a line from .. to ..
- smooth that line
- change color
- change Stroke
- delete those lines and draw them again ;-)
回到goolge文档示例，它们保存并播放每个单个字符更改（以及更多）。
是的，这是一个非常明确和可测试的方法，但要求性能需要另一个逻辑层。 有必要添加一个将这些命令简化为压缩版本的例程（见下文）
用户请求图像时，系统会查找最新的压缩图像，并添加未包含在压缩例程中的单个命令。
压缩程序：
在你最喜欢的矢量编辑器中做一个创建虚拟图像的视频记录（类似于你对用户的期望），你会注意到约60％到80％的命令对最终结果没有用处。
有针对性的压缩程序可能有以下三个步骤：
大多数情况下，您会在录制重新定位点，手柄或移动对象中看到自己，一次又一次更改颜色，设置和撤消其他参数，如笔触粗细。 甚至删除重做的元素。 例程需要优化这些命令以直接绘制最终结果。 我相信，这会根据您要查找的图像类型将您的命令列表降低至10％-50％。
压缩命令。 上例中的Path是以线段绘制的，它需要。 你通常不知道第一个onMouseDown它将以100段和200句柄结束。 但仍像其他用户一样展示创作过程。 向您的程序添加一个命令，可以绘制复杂的东西，如路径。 用户绘图过程中不需要它。 此命令可用于更快地重新创建完整形状。 现在可以在一个命令中绘制一个具有100个点和200个句柄的路径。 在此之前，您至少有300个命令的列表。
重新排序命令。 两个用户同时绘制的两个路径元素不容易压缩。 一个简单的解决方案是按元素排序命令。 该过程可能需要3分钟来创建每个形状。 动画需要真实的命令顺序才能同时看到每个片断，但最终的结果并不在意。 如果按元素排序，每个形状可以更容易压缩。
对于这篇长文章感到抱歉，希望它有帮助
链接地址: http://www.djcxy.com/p/84581.html上一篇: Concurrent drawing with paper.js
下一篇: Accessing property of constructor without creating new instance