如何缩小画布上的绘制以适合屏幕尺寸

Question

首先，很抱歉，如果这个问题不清楚。

我有一个使用javascript和socket.io制作的基于多人浏览器的绘图游戏。

我有一个画布可以绘画，每隔30毫秒，x和y位置就会发送到服务器，服务器将其广播给其他玩家。

但这会导致问题，如果某人（ a ）的屏幕较大，而某人（ b ）的屏幕较小，则b不会看到整个绘图，而a会看到较小的绘图（相对于他的屏幕尺寸）。

我怎样才能扩大b平局上a屏幕，并缩小a对平局b屏幕？

注意：客户端的源代码位于drawmythings.esy.es/app.js中

Answer 1

您需要知道屏幕A和B的屏幕尺寸（让我们将宽度与高度相同）。 在A到B之间缩放是..

例如，假设A的屏幕为2000宽，B的屏幕为1000宽。

当A在B的屏幕上查看一个点时：

(A.screenWidth / B.screenWidth ) * Bx-position

B的屏幕上x = 250的位置= A的屏幕上四分之一的距离=（2000/1000）* 250 = 500 = A的屏幕上四分之一的距离

相反，当B正在查看A的屏幕上的一个点时：

(B.screenWidth / A.screenWidth ) * Ax-position

在A的屏幕上x = 500的位置= B的屏幕上四分之一的距离=（1000/2000）* 500 = 250 =在B的屏幕上四分之一的距离

在我看来，最好的选择是将绘制的坐标存储在恒定大小的“概念”屏幕中，例如2000 x 1500（任意）。 因此，根据该比例，每个点将具有x位置和y位置。

当用户查看它时，可以通过以([users screen width] / 2000) * x-position进行绘制将其缩放到当前屏幕尺寸，与Y位置和屏幕高度相同。

这样，游戏就具有“标准”边界集，因此可以使用该边界来实现对移动等的限制，并且显示只是该用户的视图。 但是我不知道您正在编写的程序有多实用，并且您已经取得了一些进展。