インタラクティブホワイトボードアプリケーションでは画面サイズが異なる

Question

私はインタラクティブホワイトボードアプリケーションを開発しています（何かを描画し、他の同僚は描画中のものをリアルタイムで表示します）。私はhtml5キャンバスを使用しています。

ただし、同じホワイトボード上にいる人は、画面サイズが異なり、幅と高さの比率が異なる場合があります。したがって、一部の部分が他の人の画面に表示されることがあります。

どのようにこのような問題に取り組んでいますか？ （一つの解決策は、私は...、代わりにキャンバスの描画あなたは彼らが切断されている場合はより多くの要素を見て、「スクロールダウン」することができ、このようにレンダリングするためにSVGを使用していると思った）

Answer 1

怠惰なソリューション：キャンバスサイズは、メーク固定

もっと巧妙な解決策：スケール属性を使用して、キャンバスを必要なウィンドウサイズに合わせることができます。小さな画面を持つユーザーは、単純にズームインしてキャンバス全体を表示することができます。

Answer 2

すべてのキャンバスのレンダリングは、まずすべての座標に変換行列を掛けて行います。この行列は、レンダリングするすべてのピクセルに対して、スケーリング、平行移動、回転、スキュー、シアーなどをすべて1回の操作で行います。

あなたがしなければならないことは、キャンバスに共通の描画領域に合わせてトランスフォームを設定することだけです。アスペクトはディスプレイごとに異なるため、ホワイトボードに合わせてスケーリングする必要があります。したがって

あなたのホワイトボードが

var whiteBoard = { 
    width : 1000, 
    height : 500, 
} 

であり、あなたが

var scale = Math.min(canvas.width/whiteBoard.width, canvas.height/whiteboard.height); 

に合わせてホワイトボードは、分スケールを取得合うようにキャンバスサイズ

canvas.width = window.innerWidth; // or whatever page size you want 
canvas.height = window.innerHeight; 

を持っているならば、取得左上角

var top = canvas.height/2 - (whiteBoard.height * scale)/2; 
var left = canvas.width/2 - (whiteBoard.width * scale)/2; 

次に、あなたが今、あなたはすべてのディスプレイに同じ座標でキャンバスに描くことができます変換

ctx.setTransform(scale,0,0,scale,left,top); 

を設定します。

ctx.fillRect(0,0,whiteBoard.width,whiteBoard.height); 

が失われます画面サイズや縦横と何も問題はありませ表示され、それがクリッピングなし表示可能な限り大きくなります。