在不同大小的纸张JS视图上显示图纸的最佳方法是什么？

Question

上下文

我正在使用纸JS建立一个多人绘图游戏。在任何给定的时间点，单个用户都将绘制到他/她的画布上，数据将被发送到服务器，并被广播给其他用户。每个用户的画布都可以是可变大小的，并且在保持相同的高宽比的同时，它会随着窗口的大小而调整大小。

目标是让每个用户都有一个绘图的缩放表示(也就是说，所有东西都适合不同大小的画布，内容不会被扭曲)。如果绘图从较大的画布转移到较小的画布，则应该是这样，反之亦然。该项目支持绘图工具和橡皮擦工具。

问题

下面的方法1按我想要的方式缩放图纸，但是有很大的滞后。方法2处理滞后问题，但不按我想要的方式缩放绘图。

我的理解是，无论SVG是放大还是缩小，SVG都能很好地扩展。但是光栅是基于像素的，当缩放时会变得“模糊”。当我测试方法2时，来自较小画布的绘图会在较大的画布上变得模糊。无论我使用export/importJSON还是export/importSVG，结果都是一样的。有什么方法可以同时获得良好的性能和缩放图吗？例如，请参阅下面工具的实现。

方法1:路径+符号：

• 每个路径/符号放置都保持在活动层中。
• 橡皮擦工具绘制一个白色矩形(定义为符号)，以模拟“擦除”效果。
• 这是一个很好的演示，但随着活动层中的项目数量的增加，会很快滞后。特别是橡皮擦工具将无法顺利工作。
• 相关素描

方法2:光栅化：

• 在绘制路径或放置符号后，活动层被栅格化，其子层被移除。
• 这似乎在单个画布上运行得很好，而橡皮擦并不像第一种方法那样滞后。每个栅格化后，在活动层中只有2个项目。
• 当一个具有较小画布的客户端的绘图被导出(使用exportJSON或exportSVG)到一个拥有更大画布的客户端时，结果是“模糊的”。
• 上述情况也发生在绘图时，然后画布被调整到更大的尺寸。
• 相关素描

Answer 1

您可以将您的对象作为SVG发送，并在接收到它们后将其进行栅格化。