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

我正在用angularjs制作白板，插件是node.js.什么是缩放实时白板内容的最佳方法

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

我现在采用的方法是在原始大小的临时隐藏画布中绘制图形，然后当绘图流中出现暂停（换句话说，用户已经停止涂鸦）时，我缩放并复制它到主要画布。问题在于，它并不是非常实时，特别是当用户在一段时间内不停地涂鸦时。我可以尝试的另一种方法是推入数组中的所有坐标，对其应用2d仿射变换，然后重绘整个事物。虽然这对于阵列大小的增加似乎也不是一个好的解决方案，但反复尝试实时应用转换可能会轻易地消耗大量资源。

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

来源

2016-02-05 SuSub

绘制最新的鼠标/触摸事件与前一个之间的线路。将它与某种参考宽度或高度数字一起广播，以将您的计算基于此。在另一个客户端上，将给定宽度或高度除以本地宽度/高度，然后将该数字乘以给定线数据的X和Y坐标。画出来并忘记它。你现在有一条按比例绘制的线条，它需要几纳秒的时间才能用基本上为零的内存开销进行计算。 – nick

@nick，这是一个好主意，这就是为什么我主要关注2d仿射变换的问题，但问题是只能缩放单个线条以准确反映完整形状的曲线和角度缩放比例？ – SuSub

对不起，缓慢的反应 - 让我写一个完整的答案 – nick

用CSS尺度转换做它。缩放画布以适应设备的大小，无论是移动设备，台式机还是平板电脑等。

让您的画布在所有设备上固定宽度。说它是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也可以是一个容器，如果持有帆布等申报单或者其他任何一种。只需确保w是该容器的宽度等。

注意：如果有人使用手指在屏幕上绘图，则可能需要将其从缩放坐标转换为固定宽度（640x480）坐标。

顺便说一句，我发现了一个不同的方式来做到这一点，可能会更好。不知道：

Scaling canvas element with static resolution

来源

2016-02-05 00:37:31 foreyez

这不是一个好的解决方案，因为允许画布不成比例地缩放也将允许其内容变形（挤压/拉伸）。而应计算保持原始高宽比的单一比例因子，并将该单一比例因子应用于高度和宽度。 – markE

是的，这是真的，我只是想给出基本的CSS范例。 – foreyez

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

回答

相关问题