javascript - 与 paper.js 并发绘图

Question

我有一个应用程序可以处理基于 paper.js 的绘图小部件。多个用户可以同时绘制，更改会实时相互广播。问题是我需要存储更改并在加载文档时显示绘制的图像。

自然的解决方案是将客户端发送的命令存储在数据库中。但是绘制的图像可以包含数千条命令，而我可以有数十张图像。因此，当我打开一个从服务器获取命令列表的文档时，绘图可能会花费太多时间。

有没有更好的方法来存储图像和客户端之间的交互？

请注意，我有一个缩放功能，所以存储光栅不是一个选项。

更新:如果我正在存储图像(例如，在 BLOB 中)，则不清楚如何应用实时所做的更改。每次都传递图像不是我想要的解决方案。

Answer 1

如果您要将绘图保存为图像，您有几种可能的解决方案。

1. 将项目保存在文件夹中的某个位置，并将目录路径+文件名保存在数据库中
2. 将数据库中的图像保存为 blob。 Blob 确实是数据库密集型的。

关于 blob 有一些有趣的文章。喜欢this one来自微软。

As expected from the common wisdom, objects smaller than 256K are best stored in a database while objects larger than 1M are best stored in the filesystem.

为了提高性能，将图像保存到目录中将是更好的解决方案。

还可以导出绘制图像的 svg 文件。 ( info ) 不知道对你有没有帮助，但这是我的亲身经历。我同意你的观点，将数以千计的命令存储到数据库中并不是最好的解决方案。因此，您可能想看看在某处保存图像，但如果实现了该功能，您将失去编辑图像的能力。

更新:

如果您不想保存 blob，最好的解决方案是在每次进行编辑时“渲染”图像。因此，当有人打开绘图时，您可以执行所有命令。并且仅在触发编辑时应用最新的命令。

有几种选择可以实现这一点。正如 Jimmy Chandra 所说，firebase 将是一个很好的解决方案。他们还提供 tutorial几乎拥有您想要实现的一切。 (使用 x 和 y 实时坐标绘制图像)也许你需要看一看。

有关 Firebase 的更多信息。

Firebase is a powerful API to store and sync data in realtime

我相信这正是您想要实现的目标。您可以尝试他们的完整教程 here .

您可能会考虑的另一个选项是 nodejs。我见过人们使用 nodejs 作为聊天系统将数据发送给所有其他用户。如果您可以发送数据，我相信您可以用它来绘制图像。

最终由您选择要使用的技术。因此，我认为您可能必须像我建议的那样研究一些解决方案，如果您在集成该技术时遇到麻烦，可以提出不同的问题。