如何縮小畫布上的繪制以適合屏幕尺寸

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位置和屏幕高度相同。

這樣，游戲就具有“標准”邊界集，因此可以使用該邊界來實現對移動等的限制，並且顯示只是該用戶的視圖。 但是我不知道您正在編寫的程序有多實用，並且您已經取得了一些進展。