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

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

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

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

最佳答案

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

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

因此，如果您的白板是

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

无论屏幕大小或纵横比如何，都将显示，并且不会丢失任何内容，并且将显示尽可能大的图像而不会进行裁剪。

关于javascript - 交互式白板应用程序中的不同屏幕尺寸，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38137152/