缩放实时白板内容的最佳方法是什么?

What is the best way to scale contents of a realtime whiteboard

本文关键字：最佳 方法 是什么 实时 白板 缩放      更新时间：2023-09-26

我正在用angularjs制作一个白板，socketio an node.js。

只要我在任何地方为画布使用固定的宽度/高度，我就可以广播鼠标/触摸事件的坐标并实时重新创建图形。但是，我面临的问题是，当尝试使画布在不同的平台(想想台式机和智能手机(上具有不同的大小时，画布必须缩放，图形也是如此，但这会使事情变得非常慢。

我

目前采用的方法是在原始大小的临时隐藏画布中绘制图形，然后在绘图流中暂停(换句话说，用户已停止涂鸦(时，我缩放并将其复制到主画布。这样做的问题是，它根本不是实时的，尤其是当用户在一段时间内不停顿地不断涂鸦时。我可以尝试的另一种方法是推送数组中的所有坐标，对其应用 2D 仿射变换，然后重新绘制整个内容。虽然当数组大小增加时，这似乎也不是一个好的解决方案，但反复尝试实时应用转换很容易占用大量资源。

有没有更好的方法来实现这一目标？

使用CSS scale Transform来完成。缩放画布以适应设备的大小，无论是移动设备、台式机还是平板电脑，还是其他设备。

让画布在所有设备上保持固定宽度。假设它是 640px x 480px。现在我们将调整它的大小以适应任何窗口。

$(window).resize(function() {
  var w = 640; // $('#mycanvas').width();
  var h = 480; // $('#mycanvas').height();
  var newWidth = $(window).width(); // this could be either smaller or bigger than the canvas
  var newHeight = $(window).height(); // same here
  var scaleX = newWidth / w;
  var scaleY =  newHeight / h;
  $('#mycanvas').css('transform','scale(' + scaleX + ',' + scaleY +')');
    $('#mycanvas').css('-webkit-transform','scale(' + scaleX + ',' + scaleY +')');
});

注意：MyCanvas也可以是一个容器，如果有任何类型的容器可以容纳画布和其他div或其他任何东西。 只要确保 w 是该容器的宽度，等等。

【注】如果有人用手指在屏幕上绘图，您可能需要将其从缩放坐标转换为固定宽度 (640x480( 坐标。

顺便说一句，我找到了一种可能更好的不同方法。 不确定：

使用静态分辨率缩放画布元素

相关文章：