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

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

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

---

你如何解决这类问题？（我想到的一个解决方案是使用SVG来渲染图形而不是画布，这样你可以“向下滚动”来查看更多的元素，如果它们被剪切了…）

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

---

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

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

---

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

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

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

因此，如果您的白板是

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

---

无论屏幕大小或外观如何，都将显示，并且不会丢失任何内容，并且将在不剪裁的情况下尽可能大地显示。

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

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

因此，如果您的白板是

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

---

无论屏幕大小或外观如何，都将显示，并且不会丢失任何内容，并且将在不剪裁的情况下显示尽可能大的屏幕。

在这种情况下，用户必须相互交换有关其屏幕大小的信息，对吗？@user42624不，您需要定义每个人都将使用的标准白板大小。当有人在画布上画画时。从鼠标坐标中减去左上角并除以刻度。这会将鼠标坐标转换为标准白板比例和位置。没有人需要知道其他人的屏幕大小。那么在这种情况下，用户必须相互交换有关其屏幕大小的信息，对吗？@user42624不您需要定义每个人都将使用的标准白板大小。当有人在画布上画画时。从鼠标坐标中减去左上角并除以刻度。这会将鼠标坐标转换为标准白板比例和位置。没有人需要知道其他人的屏幕大小。