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

Question

我正在用 angularjs、socketio 和 node.js 制作白板。

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

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

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

Answer 1

使用 css 缩放变换来实现。缩放画布以适应设备的大小，无论是移动设备、台式机、平板电脑还是其他任何设备。

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

$(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) 坐标。

---

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

Scaling canvas element with static resolution