交互式白板应用程序中的不同屏幕尺寸

Question

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

然而，同一白板上的人可能每个人都有不同的屏幕尺寸和不同的宽度/高度比。因此，某些部分可能会在某人的屏幕上出现被剪切的情况。

您如何解决此类问题？（我认为的一个解决方案是使用 SVG 来渲染绘图而不是画布，这样您可以“向下滚动”以查看更多被剪切的元素...）

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

无论屏幕大小或宽高如何，都将显示，并且不会丢失任何内容，并且将尽可能大地显示而不会剪切。