Question

我有一个白板可以画画。用户可以在任何地方随意绘制。但是，当用户调整浏览器的大小时，画布上下文将被删除。我发现了其他可以重绘图像的解决方案。这包括创建一个临时画布，进行存储，然后在调整大小后在新画布上重新绘制。这是我下面显示的解决方案。但是，如果用户正在动态调整窗口的大小，则当我保存图像并重新绘制时，他们可能会很快失去图形上的分辨率。

我试图保持精确的绘图质量，以便用户可以根据需要调整窗口的大小，并且绘图不会变得模糊。

我已经尝试过调整图像的大小，但是在调整大小后，由于保存图像并重绘了很多次，绘图变得非常模糊。

HTML：

<canvas class="whiteboard" > </canvas>

Javascript：

  var canvas = document.getElementsByClassName('whiteboard')[0];
  canvas.width = $(document).width();
  canvas.height = $(document).height();

  var inMemCanvas = document.createElement('canvas');    
  var inMemCtx = inMemCanvas.getContext('2d');

  var context = canvas.getContext('2d');
  var heightOriginal = canvas.height;
  var widthOriginal = canvas.width;
  // current scale (original 1 to 1)
  var verticalRatio = 1;
  var horizontalRatio = 1;


  window.addEventListener('resize', onResize, false);
  onResize();


  **all the code for the user to draw**

 function onResize() {
      inMemCanvas.width = canvas.width;
      inMemCanvas.height = canvas.height;
      inMemCtx.drawImage(canvas, 0, 0);
      // remove previous scale
      context.scale(1/horizontalRatio, 1/verticalRatio);

      var heightNew = window.innerHeight;

      var widthNew = window.innerWidth;

      //get the new aspect ratio
      verticalRatio = heightNew / heightOriginal;
      horizontalRatio = widthNew / widthOriginal;

      // update width and height of canvas
      canvas.height = heightNew;
      canvas.width = widthNew;
      context.scale(horizontalRatio, verticalRatio);

      //redraw canvas
      context.drawImage(inMemCanvas, 0, 0);

       widthOriginal = widthNew;//store new widths and heights as old
       heightOriginal = heightNew;
}

图像按比例缩放，以便用户继续绘制，但正如我提到的，图像非常模糊-看起来像保存和重绘了很多次。

我知道另一种解决方案是保存用户的所有绘制动作，然后重新绘制所有动作，但这会变得非常笨重...

想知道是否有更优雅的方法。

调整大小以保持精确的绘图质量-HTML5 Canvas

0 个答案: