Question

我正在制作一个带有angularjs的白板，socketio是一个node.js.

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

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

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

Answer 1

使用css scale transform进行。缩放画布以适合设备的大小，无论是移动设备，台式机还是平板电脑，或其他任何设备。

让您的画布在所有设备上固定宽度。说它是640px×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）坐标。

是的，我发现了另一种可能更好的方法。不确定：

Scaling canvas element with static resolution

扩展实时白板内容的最佳方法是什么？

1 个答案: