交互式白板应用程序中的屏幕大小不同

Question

我正在开发一个交互式白板应用程序（你绘制一些东西，其他同行实时看到你正在绘制的东西）。我使用的是html5画布。

然而，同一白板上的人可能各自具有不同的屏幕尺寸和不同的宽高比。因此，某些部分可能会出现在某人的屏幕上。

你如何解决这类问题？ （我认为使用SVG渲染绘图而不是画布的一种解决方案，这样你可以＆＃34;向下滚动＆＃34;看到更多元素，如果它们被切割......）

Answer 1

所有画布渲染都是通过首先将所有坐标乘以变换矩阵来完成的。此矩阵可在您渲染的每个像素上对一个操作进行缩放，平移，旋转，倾斜，剪切等操作。

您所要做的就是将变换设置为适合画布上的公共绘图区域。由于不同显示器的方面不同，因此您必须缩放到适合白板的位置。

因此，如果你的白板是

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

你有一个画布大小

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

适合白板，使最小刻度适合

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

然后到左上角

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);

将显示与屏幕尺寸或方面无关，并且不会丢失任何内容，并且在没有裁剪的情况下显示尽可能大。

Answer 2

懒惰解决方案：固定画布大小

更聪明的解决方案：您可以使用scale属性使画布适合所需的窗口大小。然后，具有小屏幕的用户可以简单地放大和缩小以查看整个画布