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

different screen size in interactive whiteboard application

本文关键字：屏幕 交互式 白板 应用程序      更新时间：2023-09-26

我正在开发一个交互式白板应用程序(你画一些东西，其他人可以实时看到你在画什么)。我使用html5画布。

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

你如何处理这种问题?(我认为一个解决方案是使用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);

将显示，无论屏幕大小或方面，没有什么会丢失，它将显示尽可能大，而不剪切。

懒惰的解决方案:使画布大小固定

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

相关文章：