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

问题描述 投票:1回答:1

上下文

我正在使用Paper JS来构建一个多人绘画游戏。在任何时候,一个用户都会在自己的画布上画画,数据会被发送到服务器上,然后广播给其他用户。每个用户的画布可以是可变大小的,并且随着窗口的调整而调整大小,同时保持相同的纵横比。

我们的目标是让每个用户都有一个按比例表示的图画(即所有的东西都适合在不同大小的画布里面,而且内容不会失真)。如果一张图画从一个较大的画布转移到一个较小的画布上,或者反过来,也应该是这样。该项目支持一个绘图工具和一个橡皮擦工具。

问题

下面的方法1按照我想要的方式来缩放图纸,但有很大的滞后性。方法2可以解决滞后问题,但不能按照我想要的方式缩放图纸。

我的理解是,SVG不管是放大还是缩小都会有很好的缩放效果。但栅格是基于像素的,放大后会变得 "模糊"。当我测试方法2时,小画布上的图画在大画布上会变得模糊不清。无论我使用expimportJSON还是expimportSVG,结果都是一样的。有什么方法可以同时获得良好的性能和缩放绘图?请看下面的工具实现示例。

方法一:路径+符号。

  • 每一个路径和符号的位置都被保存在活动层中。
  • 橡皮擦工具绘制一个白色的矩形(定义为符号)来模拟 "擦除 "效果。
  • 这在演示中效果很好,但随着活动层中项目数量的增加,会很快开始滞后。特别是橡皮擦工具将无法流畅地工作。
  • 相关草图

方法2:栅格化。

  • 在绘制了一条路径或放置了一个符号后,活动层被栅格化,其子代被移除。

  • 这在单个画布上似乎效果不错,而且橡皮擦也不像第一种方法那样滞后。每次栅格化后,活动层中只有2个项目。

  • 当一个画布较小的客户端的图纸导出(使用exportJSON或exportSVG)到画布较大的客户端时,结果是 "模糊 "的。

  • 以上情况也会发生在画图完成后,将画布尺寸重新变大的情况下。

  • 相关草图

paperjs
1个回答
0
投票

你可以将你的对象以SVG的形式发送,并在收到后将其栅格化。

© www.soinside.com 2019 - 2024. All rights reserved.